JS事件小结1

1.事件流:描述的是从页面接收事件的顺序。

 

IE是事件冒泡流：事件开始时由最具体的元素接收，然后逐级向上传播到不具体的节点。

Safari，Chrome，Firefox，Opera会将事件一直冒泡到window对象。

Netscape是事件捕获流 ：在事件到达预定目标之前捕获它。

Safari，Chrome，Firefox，Opera支持这种事件流模型，从window对象开始捕获事件。

 

DOM2级事件：首先发生事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后是事件冒泡阶段。

Safari，Chrome，Firefox，Opera会在捕获阶段触发事件对象，结果会有两个机会在目标对象上面操作事件

 

2.事件处理程序

 

HTML事件处理

 

<input type="button" value="click" onclick="alert('aaa')" /> 

 缺点：1.在不能执行时触发事件，会出错 2.HTML与JS紧密耦合

DOM0级事件处理

  btn.onclick = function(){ alert(this.id); };//MyBtn

  DOM0级方法指定的事件处理程序为元素方法。即程序中this指向当前btn元素。

 

DOM2级事件处理

addEventListener()

removeEventListener()

两者皆接收三个参数

      要处理的事件名（不带on）

      作为事件处理的函数

      boolean：true 在捕获阶段调用事件处理；false 在冒泡阶段调用事件处理

移除事件时参数应与添加事件的参数一致，当使用匿名函数时无法移除事件。

 

var btn = document.getElementById("MyBtn");
btn.addEventListener("click", fun, false);
btn.removeEventListener("click", fun, flase);
//这样移除事件才有效，若是写成匿名函数则无法移除

IE事件处理

attachEvent()

detachEvent()

皆有两个参数

      事件处理程序名称(带on)

      事件处理函数

移除事件时参数应与添加事件的参数一致，当使用匿名函数时无法移除事件。

可以为一个元素添加多个事件，但是与DOM2时间相反，事件按着添加顺序的相反顺序触发。

事件处理程序在全局作用域中进行：this=window

 

3.事件对象

在触发DOM上的某个事件时，会产生事件对象event，包括导致事件的元素，事件的类型，以及其他与特定事件相关的信息。（如：鼠标事件导致的event会包含鼠标位置的信息）

 

DOM中的事件对象

在事件处理程序内部，对象this始终等于currentTarget（其事件处理程序当前正在处理的那个元素），而target则只包含事件的实际目标。

处理多个事件时可以使用type属性

阻止特定时间的默认行为，用preventDefault();

stopPropagation()立即停止事件在DOM层次的传播。

eventPhase属性可以用来确定事件当前处于事件流的哪个阶段。捕获=1；处于目标对象上=2；冒泡阶段=3

 

IE中的事件对象

访问IE中的event对象有几种不同的方式，取决于指定事件处理程序的方法。

DOM0级方法添加事件处理程序时，event作为window对象的的属性。

若用attachEvent()添加，则有一个event对象作为参数被传入到处理函数中。

var btn = document.getElementById("MyBtn");
btn.attachEvent("onclick", fucntion(event){
     alert(event.type);
});

因为事件处理程序是根据指定方式来确定的，所以不能认为this会始终等于事件目标，最好用event.srcElement属性。

returnValue属性==preventDefault()方法，设置为false，就可以阻止默认行为。

cancelBubble属性==stopPropagation()方法，不过只能取消事件冒泡，因为IE不支持捕获事件。