整理了一些jQuery关于事件冒泡和事件委托的技巧

首先,大家都知道,jQuery事件触发时有2种机制,一种是事件委托,另一种是事件冒泡(IE情况暂时不考虑)。拿click事件做例子,先附上一段代码:

html:

<body>
<div id="box">
<p id="btn">我是按钮</p>
</div>
</body>

style:

.hid{

 display:none;

}

script:

$('#box').click(function(){
 $(‘#btn’).toggleClass(‘hid’);
})
$('#btn').click(function(){
 alert('btn');
})

这段代码的本意是,当我点击#btn的时候,我要alert出来“btn”字符串,而当我点击#box的时候,我要把#btn隐藏,但是,在实际执行的时候,当我点击btn的时候,他是会先执行btn的事件,继而执行box的事件,也就是先alert,再隐藏。与我们所想有所出入,那到底要怎么解决这个问题呢,这里就要想到事件冒泡这个机制,因为当我点击btn的时候,事件会向上冒泡到父元素,直至document对象。

1.7(没记错的话)之后的jQuery版本,提供了.on()事件,用来处理绑定元素的事件,这里我们可以用.on()事件,以及stopPropagation()方法来阻止事件冒泡:

$('#box').on('click','#btn',function(e){
  e.stopPropagation();
  alert(‘btn’);
})
$('#box').click(function(){
  $(‘#btn’).toggleClass(‘hid’);
})

这里我先用on绑定了#btn的事件,使得在点击到btn按钮的时候,alert('btn'),但是因为我 e.stopPropagation()阻止了事件冒泡,因此,就不会触发toggleClas事件;而此时我点击#box的时候,就是正常的toggleClass事件被触发;

这里补充一点:.on()方法事件只会针对事件触发前就已经存在的元素上,如果是在on事件之后新增的元素,是没办法绑定到事件的,那么这个时候,通过事件委托也是可以解决这个问题的,将事件委托绑定到包含的元素上。

这里思考了一下,如果不用.on()该怎么解决,类似于原生js中,用addEventListener监听点击的target,代码也不复杂:

$(’#box‘).click(function(e) {
  if (e.target == this) {
    $(‘#btn’).toggleClass(‘hid’);
  }
})
$(‘#btn’).click(function() {
  alert(‘btn’);
})

这样子,就能达到阻止事件冒泡的样子了。

当然,事件冒泡也并非都是副作用,就是我们要讲的另一种,那就是事件委托,事件委托就是建立在事件冒泡的基础上的,比如上面那个例子,你可以假设#btn和#box之间有很多元素,当我想要点击最里层的#btn的时候,想要触发他对应的事件,那么,就可以通过点击它的外围元素,然后判断点击的是否是目标元素,也就是btn,如果是,那么触发btn的事件,其实就是上面.on()的这个例子,可以改写成:

$('body').on('click','#btn',function(e){
  alert(‘btn’);
})

把btn的事件委托给点击body来处理。

最后再仔细的分析一下,其实事件委托和事件冒泡,从逻辑上来思考无非就是2个相反的方向在执行。事件委托其实就是事件捕获过程,可以看成是从外到内捕获的过程;而事件冒泡就是从里到外冒泡的过程。

上一篇:manipulate


下一篇:jQuery超链接提示,提示跟随鼠标动