首页 > 代码库 > js事件冒泡和事件委托
js事件冒泡和事件委托
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>
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()); });
就是有一个按钮原本的dom里面是没有的,是你通过其他方式添加进来的,即未来元素,用直接绑定方法是不能成功的,只能用事件委托,委托给该元素的父级进行处理
由于事件委托是通过事件冒泡实现的,所以如果子级的元素阻止了事件冒泡,那么事件委托也将失效!
其实jQueryjQuery 1.7 Beta 1之前版本为绑定和委托事件提供了.bind()、.live()和.delegate()方法,可以说是一步步改进,
js事件冒泡和事件委托
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。