JS 事件

客户端javascript程序采用了异步事件驱动编程模式。

事件就是Web浏览器通知应用程序发生了什么事情。

事件类型是一个用来说明发生了什么类型事件的字符串。

事件目标是发生的事件或与之相关的对象。

事件对象是与特定事件相关且包含有关该事件详细信息的对象。

事件传播是浏览器决定哪个对象触发其事件处理程序的过程。事件传播的另一种形式是事件捕获，IE8及之前版本不支持事件捕获。

事件类型

       传统事件类型

              表单事件 submit/reset/focus/blur

              Window事件load/unload/focus/blur/resize/scroll

              鼠标事件 mousemove/mousedown/mouseup/mouseover/mouseoutIE中不冒泡版本mouseseenter/mouseleave

              键盘事件 keydown/keyup/keypress

       DOM事件

       HTML5事件 拖放API 定义了dragstart/drag/dragend/dragenter/dragover/dragleave/drop

       触摸屏和移动设备事件

 

 

事件处理程序

为事件指定处理程序有多种方式:

1、  HTML事件处理程序。

2、  DOM0级事件处理程序。

3、  DOM2级事件处理程序。

4、  IE事件处理程序。

5、  跨浏览器事件处理程序。

 

HTML事件处理程序: 将事件处理程序写在html标签中。

例如：<inputtype="button" value='提交' onclick="alert('你好')">

缺点:  调用函数时，函数可能为被解析，会报错； html与js 混合，耦合度高，不利于维护。

 

DOM0级事件处理程序：DOM0级事件处理程序被认为是元素的方法。换句话说，它是在元素的作用域内运行的，所以this引用当前元素。(该事件处理程序会在事件流的冒泡阶段被处理)。 想删除指定事件处理程序，将其属性值设为null就好了。

例如:

var oBtn =document.getElementById('sub');

    oBtn. function(){

      alert('NBTeam');

  }

 

DOM2级事件处理程序： DOM2级事件定义了两个方法，用于指定和删除事件处理程序。分别为addEventListener() 和 removeEventListener.所有DOM节点都包含着两个方法。

三个参数: 要处理的事件名，处理函数，布尔值。True: 在捕获阶段处理程序 false: 在冒泡阶段处理程序。

优点: 可同时为一个元素添加多个事件处理程序。

举例：

oBtn.addEventListener('click',function(){

     alert('N');

  },false);

  oBtn.addEventListener('click',function(){

     alert('B');                                                   },false);

 

IE事件处理程序： IE中对应的添加和删除函数为，attachEvent()和 detachEvent();他们接收两个参数，事件处理名和事件处理函数。由于IE只支持事件冒泡，所以通过attachEvent添加的事件处理函数都会被添加到冒泡阶段。

注：IE在使用attachEvent方法的情况下，事件处理程序的作用域为全局作用域。

attachEvent 也可以为一个元素添加多个事件处理程序。

注:逆序触发。