首先,我们都晓得,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’);
})
$(‘#jQuery,box’).click(function(){
  $(‘#btn’).toggleClass(‘hid’);
})

此处自己先用on绑定了#btn的事件,使得在点击到btn按钮的时候,alert(‘btn’),可是因为自身 e.stopPropagation()阻止了轩然大波冒泡,由此,就不会触发toggleClas事件;而这时自己点击#box的时候,就是常规的toggleClass事件被触发;

此地补充某些:.on()方法事件只会针对事件触发前就早已存在的因素上,如假诺在on事件随后新增的要素,是没办法绑定到事件的,那么这个时候,通过事件委托也是能够解决那几个题材的,将事件委托绑定到含有的要素上。

那边思考了弹指间,如若不用.on()该怎么化解,类似于原生js中,用add伊芙ntListener监听点击的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个相反的势头在执行。事件委托其实就是事件捕获过程,能够看作是从外到内破获的历程;而事件冒泡就是从里到外冒泡的长河。

相关文章

网站地图xml地图