一聚教程网:一个值得你收藏的教程网站

热门教程

js事件冒泡和事件委托的详解

时间:2022-06-25 19:38:10 编辑:袖梨 来源:一聚教程网

js事件冒泡

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

html:


       
  • 全部

  •    
  • 纽约

  •    
  • 洛杉矶

  •    
  • 拉斯维加斯

  •    
  • 夏威夷

  •    
  • 旧金山

  •    
  • 奥兰多

  •    
  • 西雅图

js:


$("ul[data-type='cityPick']").on('click',function(){
    alert("父元素ul被点击");
});
$("ul[data-type='cityPick']").on('click','li',function(){
    alert("子元素li被点击");
});
当li的点击事件被触发时,父级ul的点击事件也被触发执行了,

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

js:


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


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

js事件委托

js事件委托,其实是使用了冒泡的原理,从点击的元素开始,递归方式的向父元素传播事件,这样做的好处是对于大量要处理的元素,不必为每个元素都绑定事件,只需要在他们的父元素上绑定一次即可,提高性能。 还有一个好处就是可以处理动态插入dom中的元素,直接绑定的方式是不行的。
就是事件目标自身不处理事件,而是把处理任务委托给其父元素或者祖先元素,甚至根元素事件委托很好地利用了"事件冒泡"。当点击子元素,根据"事件冒泡",该子元素的父级元素捕获了该次点击事件,并触发自己的方法。
看实例:
假如现在有10个按钮,要为每个按钮绑定一个click事件,可能才十个按钮,你可以一个一个的绑定或用循环进行绑定,但是这样性能呢?
html:



        提交
        提交
        提交
        提交
        提交
        提交
        提交
        提交
        提交
        提交
   

js:

 

$(".button-group").on('click','.btn',function(){
      alert($(this).html());
});
这里可以看出,我们只是为所有的button的一个父级绑定了click事件,而不是为所有的button绑定事件,极大的提高了性能,这样做的好处还有可以对动态加进来的元素进行处理

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

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

其实jQueryjQuery 1.7 Beta 1之前版本为绑定和委托事件提供了.bind()、.live()和.delegate()方法,可以说是一步步改进,
 
假设有一个多行多列的表格,我们想让用户单击每个单元格都能看到与其中内容相关的更多信息(比如,通过提示条)。为此,可以为每个单元格都绑定click事件:

$("info_table td").bind("click", function(){/*显示更多信息*/});

问题是,如果表格中要绑定单击事件的有10列500行,那么查找和遍历5000个单元格会导致脚本执行速度明显变慢,而保存5000个td元素和相应的事件处理程序也会占用大量内存
事件委托可以解决上述两个问题。具体到代码上,只要用jQuery 1.3新增的.live()方法代替.bind()方法即可:

$("#info_table td").live("click",function(){/*显示更多信息*/});

这里的.live()方法会把click事件绑定到$(document)对象(但这一点从代码中体现不出来,这也是.live()方法饱受诟病的一个重要原因,稍后再详细讨论),而且只需要给$(document)绑定一次(不是50次,更不是5000次)。在接收到任何事件时,$(document)对象都会检查事件类型和事件目标,如果是click事件且事件目标是td,那么就执行委托给它的处理程序。
一切似乎很完美。可惜,事实并非如此。因为.live()方法并不完美,它有如下几个主要缺点:
$()函数会找到当前页面中的所有td元素并创建jQuery对象,但在确认事件目标时却不用这个td元素集合,而是使用选择符表达式与event.target或其祖先元素进行比较,因而生成这个jQuery对象会造成不必要的开销;
默认把事件绑定到$(document)元素,如果DOM嵌套结构很深,事件冒泡通过大量祖先元素会导致性能损失;
只能放在直接选择的元素后面,不能在连缀的DOM遍历方法后面使用,即$("#infotable td").live...可以,但$("#infotable").find("td").live...不行;

收集td元素并创建jQuery对象,但实际操作的却是$(document)对象,令人费解。
而为了避免事件冒泡造成的性能损失,jQuery从1.4开始支持在使用.live()方法时配合使用一个上下文参数:
$("td",$("#info_table")[0]).live("click",function(){/*显示更多信息*/});

这样,“受托方”就从默认的$(document)变成了$("#infotable")[0],节省了冒泡的旅程。
.delegate()
如前所述,为了突破单一.bind()方法的局限性,实现事件委托,jQuery 1.3引入了.live()方法。后来,为解决“事件传播链”过长的问题,jQuery 1.4又支持为.live()方法指定上下文对象。而为了解决无谓生成元素集合的问题,jQuery 1.4.2干脆直接引入了一个新方法.delegate()。
使用.delegate(),前面的例子可以这样写:

$("#info_table").delegate("td","click",function(){/*显示更多信息*/});

jQuery 1.7为了解决.bind()、.live()和.delegate()并存造成的不一致性问题,将会增加一对新的事件方法:.on()和.off():

$(elems).on(events, selector, data, fn);
$(elems).off(events, selector, fn);

如果指定selector,则为事件委托;否则,就是常规绑定。
所以现在只要用on方法就可以了,推荐用on方法进行委托或常规绑定事件

热门栏目