关于事件机制，事件冒泡，事件捕获...

关于事件机制

我们经常会遇到JavaScript的事件机制，例如事件绑定、事件监听、事件委托（事件代理）等，对这些概念有些模糊。

一、事件绑定

要想让 JavaScript 对用户的操作作出响应，首先要对 DOM 元素绑定事件处理函数。所谓事件处理函数，就是处理用户操作的函数，不同的操作对应不同的名称。

常用的绑定事件的方法：

(1) 在DOM元素中直接绑定

在DOM元素上绑定onclick、onmouseover、onmouseout、onmousedown、onmouseup、ondblclick、onkeydown、onkeypress、onkeyup等

(2) 在JavaScript代码中绑定

    document.getElementById("btn").onclick = function(){

      alert("hello world!");

}

(3) 绑定事件监听函数

事件监听分为3个事件阶段：捕获阶段、目标阶段、冒泡阶段

①　捕获阶段：事件从根节点流向目标节点，途中流经各个DOM节点，在各个节点上

触发捕获事件，直到达到目标节点。

②　目标阶段：事件到达目标节点时，就到了目标阶段，事件在目标节点上被触发

③　冒泡阶段：事件在目标节点上触发后，不会终止，一层层向上冒，回溯到根节点。

W3C规范:element.addEventListener(event, function, useCapture)

例：document.getElementById("btn1").addEventListener("click",hello);

注：useCapture：指定事件是否在捕获或冒泡阶段执行，默认false。

（true：捕获，False：冒泡）

IE标准:element.attachEvent(event, function)

event需加“on“，例如：onclick。

例：document.getElementById("btn2").attachEvent("onclick",hello);

 

事件监听的优点

①　可以绑定多个事件，常规的事件绑定只执行最后绑定的事件。

②　可以解除相应的绑定btn5.removeEventListener("click",hello2);

 

二、事件委托

事件委托就是利用冒泡的原理，把事件加到父元素或祖先元素上，触发执行效果。

在实际的代码中我们可能用到jQuery的live()、delegate()、bind()、on()等。

事件委托优点

1、提高JavaScript性能。事件委托可以显著的提高事件的处理速度，减少内存的占用。

传统写法：item1.onclick = function(){

 alert("hello item1");

}

item2.onclick = function(){

 alert("hello item2");

}

item3.onclick = function(){

 alert("hello item3");

}

事件委托：document.addEventListener("click",function(event){

 var target = event.target;

 if(target == item1){

alert("hello item1");

 }else if(target == item2){

 alert("hello item2");

 }else if(target == item3){

 alert("hello item3");

 }

})

2、动态的添加DOM元素，不需要因为元素的改动而修改事件绑定。