关于事件冒泡和事件委托
以下面代码为例:
<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却没有,只有具体的规定的元素才会响应该事件。