addEventListener() 方法，监听事件，向一个元素添加多个事件处理程序。
第一个参数是事件的类型（比如 “click” 或 “mousedown”）。
第二个参数是当事件发生时我们需要调用的函数。
第三个参数是布尔值，指定使用事件冒泡还是事件捕获。此参数是可选的。

事件冒泡

多个元素嵌套并调用同一个事件时，由内部子元素先触发事件，再触发父元素的事件。

<body><div id="box"><button type="button" id="btn">按钮</button></div><script type="text/javascript">var box = document.getElementById("box");var btn = document.getElementById("btn");// 事件冒泡,嵌套元素，子元素先触发，之后触发父元素，以此类推btn.addEventListener("click",function(){console.log("btn-------");});document.addEventListener("click",function(){console.log("document-------");});box.addEventListener("click",function(){console.log("box-------");});//使用外部函数时，嵌套元素，触发事件冒泡/*btn.onclick = function() {console.log("btn-------");}box.onclick = function() {console.log("box-------");}document.onclick = function() {console.log("document-------");}*/</script>
</body>

事件捕获

多个元素嵌套并调用同一个事件时，由父元素先触发事件，再内部子父元素的事件。

<body><div id="box"><button type="button" id="btn">按钮</button></div><script type="text/javascript">var box = document.getElementById("box");var btn = document.getElementById("btn");// 事件捕获，嵌套元素，父元素先被触发，之后触发子元素，以此类推btn.addEventListener("click",function(){console.log("btn-------");},true);document.addEventListener("click",function(){console.log("document-------");},true);box.addEventListener("click",function(){console.log("box-------");},true);</script>
</body>

阻止事件冒泡

使用event.stopPropagation()方法，终止事件在传播过程的捕获、目标处理或起泡阶段进一步传播。

该方法将停止事件的传播，阻止它被分派到其他 Document 节点。在事件传播的任何阶段都可以调用它。注意，虽然该方法不能阻止同一个 Document 节点上的其他事件句柄被调用，但是它可以阻止把事件分派到其他节点。

<body><div id="box"><button type="button" id="btn">按钮</button></div><script type="text/javascript">var box = document.getElementById("box");var btn = document.getElementById("btn");btn.addEventListener("click", function(event) {var event = event || window.event; //兼容性处理//跨浏览器的事件对象if (event.stopPropagation) {//阻止事件冒泡event.stopPropagation(); //非IE} else {//阻止事件冒泡event.cancelBubble = true;   //IE}console.log("btn-------");});box.addEventListener("click", function() {//未使用event.stopPropagation()方法阻止事件冒泡console.log("box-------");});document.addEventListener("click", function() {console.log("document-------");});</script>
</body>

取消默认事件

方法一：使用event.preventDefault()方法
该方法将通知 Web 浏览器不要执行与事件关联的默认动作（如果存在这样的动作）。

<body><a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a1">a1取消默认事件</a><a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a2">a2未取消默认事件</a><script type="text/javascript">var a1 = document.getElementById("a1");var a2 = document.getElementById("a2");// 取消默认事件:方法1  event.preventDefault()a1.onclick=function(event){var event = event || window.event; //兼容性处理//跨浏览器的事件对象if(event.preventDefault){// 取消默认事件event.preventDefault();  //非IE}else{// 取消默认事件event.returnValue=false;  //IE}console.log("a1-------取消了默认事件");}</script>
</body>

方法二：return false;
阻止事件继续传播，事件冒泡和默认行为都被阻止。

<body><a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a1">a1删除</a><a href="https://www.baidu.com/?tn=48020221_20_hao_pg&H123Tmp=nunew11" id="a2">a2删除</a><script type="text/javascript">var a1 = document.getElementById("a1");var a2 = document.getElementById("a2");// 取消默认事件:方法2  return falsea1.onclick = function() {console.log("a1-------取消了默认事件");return false; //事件处理函数会取消事件，不再继续向下执行。比如表单将终止提交。(阻止事件继续传播，事件冒泡和默认行为都被阻止。)}</script>
</body>

JS 关于事件冒泡，事件捕获，阻止事件冒泡，取消默认事件相关推荐

js阻止子元素事件_JS阻止冒泡和取消默认事件(默认行为)-前端开发博客
js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消默认事件.对于冒 ...
JavaScript阻止冒泡和取消默认事件(默认行为)
JavaScript冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消 ...
设置网页右键点击，并阻止右键点击默认事件
设置网页右键点击,并阻止右键点击默认事件 //为当前文档添加鼠标右击事件,防止默认的右击菜单弹出 document.oncontextmenu=Youji; function Youji(){aler ...
如何解决onclick与onmousedown,onmouseup的冲突，取消默认事件
onclick是点击,一个完整的点击动作由按下鼠标键onmousedown,和弹起鼠标键onmouseup完成,所以很多时候,onclick事件和onmousedown,onmouseup混用的时候会 ...
js中冒泡和捕获/阻止冒泡和捕获事件
JavaScript中捕获/阻止捕获.冒泡/阻止冒泡事件流描述的是从页面中接收事件的顺序.提出事件流概念的正是IE和Netscape,但是前者提出的是我们常用的事件冒泡流,而后者提出的是事件捕获流. ...
JS阻止冒泡和取消默认事件(默认行为)
阻止事件冒泡 function stopPropagat(e) {if (e && e.stopPropagation) {e.stopPropagation();//标准浏览器} e ...
Vue 中实现监听keydown快捷键阻止和恢复浏览器默认事件
mounted() {window.addEventListener('keydown', this.handleEvent) }, beforeDestroy() {window.removeEve ...
JS--JavaScript提交表单（submit事件）、重置表单、取消默认提交表单（单击按钮、回车）
提交表单使用< input > 或 < button >标签都可以定义提交按钮,只要将type属性值设置为"submit"即可,而图像按钮则是通过将 &l ...
取消默认事件和绑定默认事件
问题: 阻止默认操作和重新绑定右键事件如: 右键菜单 // 取消右键默认 // 全局 document.oncontextmenu = function (event) {if (event.pre ...
JS 中的事件冒泡与捕获
本文来源:渔人原文地址:http://yuren.space/blog/2016/10/16/事件冒泡与捕获/ 刚接触 JS 的那个时候,啥也不懂,只想着如何利用 Google.百度到的函数来解决实 ...

JS 关于事件冒泡，事件捕获，阻止事件冒泡，取消默认事件

事件冒泡

事件捕获

阻止事件冒泡

取消默认事件

JS 关于事件冒泡，事件捕获，阻止事件冒泡，取消默认事件相关推荐

最新文章

热门文章