关于js中的事件一二三

---

1 . 是什么？

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。这种在传统的软件工程中被称为观察员模式的模型。

2. 事件类型

• UI事件，当用户与页面上的元素交互时触发
• 焦点事件，当元素获得或失去焦点时触发
• 鼠标事件，当用户通过鼠标在页面上执行操作时触发
• 滚轮事件，当使用鼠标滚轮时触发
• 文本事件，当在文档中输入文本时触发
• 键盘事件，当用户通过键盘在页面上执行操作时触发
• 合成事件，当为IME输入字符时触发
• 变动事件，当底层DOM发生变化时触发

3. 关于各类的常用事件

---

一、UI事件

• load事件
  JavaScript中最常用的一个事件就是load。当页面完全加载后，就会触发window上面的load事件。

EventUtil.addHandler(window,"load",function(event){
    alert("Loaded!");
})

也可以使用JavaScript实现：

var image = document.getElementByid("my Image");
EventUtil.addhandler(image,"load",function(event){
  event = EventUtil.getEvent(event);
  alert(EventUtil.getTarget(event).src);
});

• unload事件
  与load事件对应的是unload事件，这个事件在文档中被完全卸载后触发。只要用户从一个页面切换到另一个页面，就会发生unload事件。
• resize事件
  当浏览器窗口被调整到一个新的高度或宽度时，就会触发resize事件。这个事件在window上触发，因此可以通过JavaScript或者元素中的onresize特性来指定事件处理程序。
• scroll事件

EventUtil.addHandler(window,scroll,function(event){
  if(document.compatMode == "CSS1Compat"){
      alert(document.documentElement.scrollTop);
  }
  else {
    alert(document.body.scrollTop);
  }
})

以上代码指定的事件处理程序会输出页面滚动位置 ——根据呈现模式不同使用了不同的元素。scroll会在文档被滚动期间重复被触发，所以有必要尽量保持事件处理程序的代码简单。

---

二、焦点事件

• blur：在元素失去焦点时触发，这个事件不会冒泡，所有浏览器都支持
• focus：在元素或得焦点时触发

---

三、鼠标与滚轮事件

• click：用户单击鼠标按钮或者按下回车时触发，onclick事件处理程序既可以通过键盘也可以通过鼠标执行
• dbclick：用户双击鼠标按钮时触发
• mousedown：用户按下任意鼠标按钮时触发，不能通过键盘触发
• mousemove：当鼠标指针在元素内部移动时重复地触发
• mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一元素边界之内时触发
• mouseup：在用户时方鼠标按钮时触发
• mousewheel：当用户通过鼠标滚轮与页面交互、在垂直方向滚动页面时，就会触发mousewheel事件。mousewheel事件对应的event对象包含一个特殊的wheelDelta属性。当用户向前滚动鼠标滚轮时，wheelDelta是120的倍数，反之，为-120的倍数。

//添加mousewheel事件
EventUtil.addHandler(document,"mousewheel",function(event){
  event = EventUtil.getEvent(event);
  alert(event.wheelDelta);
});

---

四、HTML5事件

• contextmenu事件：用以表示何时应该应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。
• beforeunload事件：为了让开发人员有可能在页面卸载前阻止这一操作
• DOMContentLoaded事件：window的load事件会在页面中的一切都加载完毕时触发，但这个过程可能会因为要加载的 外部资源过多而颇废周折，而DOMContentLoaded事件则在形成完整的DOM树之后就会触发
• readystatechange事件：提供与文档或元素加载有关的信息。
• hashchange事件：在URL的参数列表发生变化时通知开发人员。