jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法

首页

web前端

js教程

jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法_jquery

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:29 PM

首先，大家都知道，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');
})
$('#box').click(function(){
 $(‘#btn').toggleClass(‘hid');
})

这里我先用on绑定了#btn的事件，使得在点击到btn按钮的时候，alert('btn'),但是因为我 e.stopPropagation()阻止了事件冒泡，因此，就不会触发toggleClas事件;而此时我点击#box的时候，就是正常的toggleClass事件被触发;

这里思考了一下，如果不用.on()该怎么解决，类似于原生js中，用addEventListener监听点击的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个相反的方向在执行。事件委托其实就是事件捕获过程，可以看成是从外到内捕获的过程；而事件冒泡就是从里到外冒泡的过程。

jquery的冒泡事件的阻止与允许(三种实现方法)

冒泡或默认的事件发生,在某些时候是不需要的,在此就需要一些可以阻止冒泡和默认的事件的方法,本文介绍三种方法做到不同程度的阻止，感兴趣的朋友可以了解下，或许对你了解冒泡事件有所帮助

有时我们不希望冒泡或默认的事件发生，这样就需要一些jquery的的方法阻止冒泡和默认的事件了。
可以通过以下三种方法做到不同程度的阻止。

A：return false --->In event handler ,prevents default behavior and event bubbing 。

return false 在事件的处理中，可以阻止默认事件和冒泡事件。

B：event.preventDefault()---> In event handler ,prevent default event (allows bubbling) 。

event.preventDefault()在事件的处理中，可以阻止默认事件但是允许冒泡事件的发生。

C：event.stopPropagation()---> In event handler ,prevent bubbling (allows default behavior).。

event.stopPropagation()在事件的处理中，可以阻止冒泡但是允许默认事件的发生。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

Python vs. JavaScript：开发人员的比较分析May 09, 2025 am 12:22 AM

Python和JavaScript的主要区别在于类型系统和应用场景。1.Python使用动态类型，适合科学计算和数据分析。2.JavaScript采用弱类型，广泛用于前端和全栈开发。两者在异步编程和性能优化上各有优势，选择时应根据项目需求决定。

Python vs. JavaScript：选择合适的工具May 08, 2025 am 12:10 AM

选择Python还是JavaScript取决于项目类型：1)数据科学和自动化任务选择Python；2)前端和全栈开发选择JavaScript。Python因其在数据处理和自动化方面的强大库而备受青睐，而JavaScript则因其在网页交互和全栈开发中的优势而不可或缺。

Python和JavaScript：了解每个的优势May 06, 2025 am 12:15 AM

Python和JavaScript各有优势，选择取决于项目需求和个人偏好。1.Python易学，语法简洁，适用于数据科学和后端开发，但执行速度较慢。2.JavaScript在前端开发中无处不在，异步编程能力强，Node.js使其适用于全栈开发，但语法可能复杂且易出错。

JavaScript的核心：它是在C还是C上构建的？May 05, 2025 am 12:07 AM

javascriptisnotbuiltoncorc; saninterpretedlanguagethatrunsonenginesoftenwritteninc.1）javascriptwasdesignedAsalightweight，解释edganguageforwebbrowsers.2）Enginesevolvedfromsimpleterterterpretpreterterterpretertestojitcompilerers，典型地提示。

JavaScript应用程序：从前端到后端May 04, 2025 am 12:12 AM

JavaScript可用于前端和后端开发。前端通过DOM操作增强用户体验，后端通过Node.js处理服务器任务。1.前端示例：改变网页文本内容。2.后端示例：创建Node.js服务器。

Python vs. JavaScript：您应该学到哪种语言？May 03, 2025 am 12:10 AM

选择Python还是JavaScript应基于职业发展、学习曲线和生态系统：1)职业发展：Python适合数据科学和后端开发，JavaScript适合前端和全栈开发。2)学习曲线：Python语法简洁，适合初学者；JavaScript语法灵活。3)生态系统：Python有丰富的科学计算库，JavaScript有强大的前端框架。

JavaScript框架：为现代网络开发提供动力May 02, 2025 am 12:04 AM

JavaScript框架的强大之处在于简化开发、提升用户体验和应用性能。选择框架时应考虑：1.项目规模和复杂度，2.团队经验，3.生态系统和社区支持。

JavaScript，C和浏览器之间的关系May 01, 2025 am 12:06 AM

引言我知道你可能会觉得奇怪，JavaScript、C 和浏览器之间到底有什么关系？它们之间看似毫无关联，但实际上，它们在现代网络开发中扮演着非常重要的角色。今天我们就来深入探讨一下这三者之间的紧密联系。通过这篇文章，你将了解到JavaScript如何在浏览器中运行，C 在浏览器引擎中的作用，以及它们如何共同推动网页的渲染和交互。JavaScript与浏览器的关系我们都知道，JavaScript是前端开发的核心语言，它直接在浏览器中运行，让网页变得生动有趣。你是否曾经想过，为什么JavaScr

See all articles