关于js事件委托和冒泡

关于js事件委托和冒泡

在编写自定义插件时候,经常会定义插件的事件,那么掌握了事件委托和冒泡会更加得心应手,写出更加优雅的代码。

首先说冒泡:

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

看例子:

<ul class="ulclass" sheng="heilongjiang"> 
    <li>黑河</li> 
    <li>五大连池</li> 
    <li>伊春</li> 
    <li>鹤岗</li> 
    <li>双鸭山</li> 
</ul>

js中声明事件:
$("ul[sheng='heilongjiang']").on('click',function(){ 
    alert("父元素ul被点击"); 
}); 
$("ul[sheng='heilongjiang']").on('click','li',function(){ 
    alert("子元素li被点击"); 
});
当li的点击事件被触发时,父级ul的点击事件也被触发执行。
如果某些情况下不希望冒泡:
$("ul[sheng='heilongjiang']").on('click','li',function(){ 
   e.stopPropagation();//禁用冒泡了
   alert("子元素li被点击"); 
});
接下来是事件委托:

js事件委托,其实也是使用了冒泡的原理,从点击的子元素开始,向它的父元素传播事件,
这样做好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元
素上绑定一次即可,提高性能。 还有一个好处就是可以处理动态插入dom中的元素,直接
绑定的方式是不行的。就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者
祖先元素,甚至根元素事件委托很好地利用了"事件冒泡"。当点击子元素,根据"事件冒泡",
该子元素的父级元素捕获了该次点击事件,并触发自己的方法。
假如现在有100个按钮,要为每个按钮绑定一个click事件,如果循环100个按钮加事件,对性能
会有一定的影响。
看下示例:
<div class="buttons">
        <bottoun type="button" class="btn">点我触发事件</bottoun>
        <bottoun type="button" class="btn">点我触发事件</bottoun>
        <bottoun type="button" class="btn">点我触发事件</bottoun>
        .......100个按钮
</div>
$(".buttons").on('click','.btn',function(){
      alert("come on baby!");
});

事件委托注意逆向思维来理解和考虑。

发表评论

电子邮件地址不会被公开。 必填项已用*标注