关于事件冒泡和事件委托

标签：

以下面代码为例：

<div>

　　<a></a>

</div>

假设div上有个mouseout事件

简而言之，事件冒泡就是当鼠标在a的区域mouseout时，这个事件会一层层向外传播，最终会触发div的mouseout事件。

而事件委托是则是利用事件冒泡的这一特性。以下面代码为例：

<div id="#switch">

　　<button id="btn1"></button>

　　<button id="btn1"></button>

　　<button id="btn1"></button>

</div>

假设每个button上都有绑定各自的事件响应，如果这儿有10几个button，不可能每个button都去写$("buttoni").click(function(){

});

这时可以利用事件委托给外层的div，通过在div上绑定click事件，例如下面代码：

$("#switch").click(function(event){//event指真正点击的对象

　　if((event.target).is(‘button‘){//注意。利用target来寻找事件目标，往往需要这个目标是接收到事件的最里面最深处的元素。

　　//判断ID是什么，实现响应

　　}

});

 此处作为一个小补充：mouseout和mouseover会有冒泡事件，而mouseleave和mouseenter却没有，只有具体的规定的元素才会响应该事件。

关于事件冒泡和事件委托

标签：

原文地址：http://www.cnblogs.com/openflyme/p/4742550.html