关于事件冒泡和事件委托

以下面代码为例:

<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却没有,只有具体的规定的元素才会响应该事件。

posted @ 2015-08-19 16:09  fly1111345我  阅读(378)  评论(0编辑  收藏  举报