事件冒泡,捕获,阻止行为
Posted 汤姆猫8
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了事件冒泡,捕获,阻止行为相关的知识，希望对你有一定的参考价值。
一、事件的发生顺序
这个问题的起源非常简单，假设你在一个元素中又嵌套了另一个元素
复制代码 代码如下:
-----------------------------------
| element1 |
| ------------------------- |
| |element2 | |
| ------------------------- |
-----------------------------------
：并且两者都有一个onClick事件处理函数(event handler)。如果用户单击元素2，则元素1和元素2的单击事件都会被触发。但是哪一个事件先被触发？哪一个事件处理函数会被首先执行？换句话说，事件的发生顺序到底如何？
个人实践理解：
一般情况下，点击element2之后，会先进行捕获，也就是
①从外到element2元素一路激活捕获事件，
②然后从内到外激活冒泡事件。
默认情况下事件属于——冒泡事件，例如：
var btn1 = document.getElementById(\'btn1\');
btn1.onclick = function(){ alert(\'123\'); }
可以通过这种方法去规定捕获事件和冒泡事件：（规定这种事件的作用——可以指定事件发生的先后顺序）
var btn = document.getElementById(\'btn\'); var box = document.getElementById(\'box\'); //true——捕获； false——冒泡 btn.addEventListener(\'click\',doSomething2,false) document.addEventListener(\'click\',doSomething,true) //先进行捕获阶段，然后进行冒泡。 //单击btn按钮后，先doSomething然后doSomething2
若要做到阻止冒泡行为的发生，需要用到——window.event.cancelBubble = true;
实践案例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #box { width: 300px; height: 300px; background: red; display: none; } </style> <script type="text/javascript"> window.onload = function() { var btn = document.getElementById(\'btn\'); var box = document.getElementById(\'box\'); var btn1 = document.getElementById(\'btn1\'); //true——捕获； false——冒泡 btn.addEventListener(\'click\',doSomething2,false) document.addEventListener(\'click\',doSomething,false) /* btn.addEventListener(\'click\',doSomething2,false) document.addEventListener(\'click\',doSomething,true) 先进行捕获阶段，然后进行冒泡。先doSomething然后doSomething2 */ btn1.onclick = function(){ alert(\'123\'); } function doSomething2(ev) { console.log(ev); console.log(event); var oEvent = ev || event; console.log(oEvent); box.style.display = \'block\'; //oEvent.cancelBubble = true;//高版本浏览器 stopBubble(oEvent); //调用阻止冒泡方法 //在低版本的chrome和firefox浏览器中需要兼容性处理 //高版本chrome和firefox浏览器直接使用上面这行代码即可 } function doSomething() { box.style.display = \'none\'; alert(\'document\'); } } //阻止冒泡事件的兼容性处理 function stopBubble(e) { if(e && e.stopPropagation) { //非IE e.stopPropagation(); } else { //IE window.event.cancelBubble = true; } } </script> </head> <body> <input type="button" id="btn" value="语言" /> <input type="button" id="btn1" value="语言1" /> <div id="box"></div> </body> </html>
以上是关于事件冒泡,捕获,阻止行为的主要内容，如果未能解决你的问题，请参考以下文章