js事件冒泡和事件委托

Posted 2020-08-30

js所谓的事件冒泡就是子级元素的某个事件被触发，它的上级元素的该事件也被递归执行

html:

 1 <ul class="clearfix" data-type="cityPick"> 
 2     <li class="active_sort_opts" data-id="0">全部</li> 
 3     <li data-id="88">纽约</li> 
 4     <li data-id="119">洛杉矶</li> 
 5     <li data-id="138">拉斯维加斯</li> 
 6     <li data-id="84">夏威夷</li> 
 7     <li data-id="120">旧金山</li> 
 8     <li data-id="105">奥兰多</li> 
 9     <li data-id="118">西雅图</li> 
10 </ul>

js:

1 $("ul[data-type=‘cityPick‘]").on(‘click‘,function(){ 
2     alert("父元素ul被点击"); 
3 }); 
4 $("ul[data-type=‘cityPick‘]").on(‘click‘,‘li‘,function(){ 
5     alert("子元素li被点击"); 
6 });

当li的点击事件被触发时，父级ul的点击事件也被触发执行了，

而在某些场合我们是不希望它冒泡的，怎么做呢? 简单!

js:

1 $("ul[data-type=‘cityPick‘]").on(‘click‘,function(){ 
2     alert("父元素ul被点击"); 
3 }); 
4 $("ul[data-type=‘cityPick‘]").on(‘click‘,‘li‘,function(e){ 
5     e.stopPropagation();//阻止冒泡 
6     alert("子元素li被点击"); 
7 });

加上e.stopPropagation(); 这一句便可以阻止事件冒泡了

 

js事件委托

js事件委托，其实是使用了冒泡的原理，从点击的元素开始，递归方式的向父元素传播事件，这样做的好处是对于大量要处理的元素，不必为每个元素都绑定事件，只需要在他们的父元素上绑定一次即可，提高性能。 还有一个好处就是可以处理动态插入dom中的元素，直接绑定的方式是不行的。

就是事件目标自身不处理事件，而是把处理任务委托给其父元素或者祖先元素，甚至根元素事件委托很好地利用了"事件冒泡"。当点击子元素，根据"事件冒泡"，该子元素的父级元素捕获了该次点击事件，并触发自己的方法。

看实例：

假如现在有10个按钮，要为每个按钮绑定一个click事件，可能才十个按钮，你可以一个一个的绑定或用循环进行绑定，但是这样性能呢？

html:

 1 <div class="button-group">
 2         <bottoun type="button" class="btn">提交</bottoun>
 3         <bottoun type="button" class="btn">提交</bottoun>
 4         <bottoun type="button" class="btn">提交</bottoun>
 5         <bottoun type="button" class="btn">提交</bottoun>
 6         <bottoun type="button" class="btn">提交</bottoun>
 7         <bottoun type="button" class="btn">提交</bottoun>
 8         <bottoun type="button" class="btn">提交</bottoun>
 9         <bottoun type="button" class="btn">提交</bottoun>
10         <bottoun type="button" class="btn">提交</bottoun>
11         <bottoun type="button" class="btn">提交</bottoun>
12 </div>

js:

$(".button-group").on(‘click‘,‘.btn‘,function(){
      alert($(this).html());
});

这里可以看出，我们只是为所有的button的一个父级绑定了click事件，而不是为所有的button绑定事件，极大的提高了性能，这样做的好处还有可以对动态加进来的元素进行处理

就是有一个按钮原本的dom里面是没有的，是你通过其他方式添加进来的，即未来元素，用直接绑定方法是不能成功的，只能用事件委托，委托给该元素的父级进行处理

由于事件委托是通过事件冒泡实现的，所以如果子级的元素阻止了事件冒泡，那么事件委托也将失效！

其实jQueryjQuery 1.7 Beta 1之前版本为绑定和委托事件提供了.bind()、.live()和.delegate()方法，可以说是一步步改进，