首页 > 代码库 > JavaScript事件——冒泡、捕获
JavaScript事件——冒泡、捕获
本节要点：1.干预系统的事件处理机制（一）DOM事件流
（二）停止事件冒泡
（三）阻止事件的默认行为
1.干预系统的事件处理机制
（一）DOM事件流
DOM模型是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这个传播过程就是DOM事件流。
DOM事件标准定义了两种事件流，分别是捕获事件和冒泡事件。
1.冒泡事件流
默认情况下，事件使用冒泡事件流。当事件（例如单击事件）在某一DOM元素上被触发时，事件将沿着该节点的各个父结点冒泡穿过整个DOM节点层次。在冒泡过程中的任何时候都可以终止事件的冒泡。如果不停止事件的传播，事件将一直通过DOM冒泡直至到达文档根。
（冒泡往上走）
2.捕获事件流
于冒泡模型相反，在捕获事件流模型中，事件的处理将从DOM层次的根开始，而不是从触发事件的目标元素开始，事件被从目标元素的所有所有祖先元素依次往下传递。在这个过程中，事件会被从文档的根到事件目标元素之间各个继承派生的元素所捕获。
（捕获往下走）
3.DOM标准的事件模型
DOM标准同时支持捕获事件模型和冒泡事件模型，但是，捕获事件模型先发生。两种事件流都会触发DOM中的所有对象，从document对象开始，也在document对象结束。
4.事件传导的3个阶段
（1）事件捕捉（Capturing）阶段：事件将沿着DOM树向下传送，经过目标节点的每一个祖先节点，直至目标节点。例如，用户单击了一个超链接，则该单击事件将从document节点转送到html元素、body元素以及包含该链接的p元素。目标节点就是触发事件的DOM节点。
（2）目标（target）阶段：在此阶段中，事件传导到目标节点。浏览器在查找到已经指定给目标事件的监听器后，就会运行该监听器。
（3）冒泡（Bubbling）阶段：事件将沿着DOM树向上转送，再次逐个访问目标元素的祖先节点直到document节点。该过程中的每一步，浏览器都将检测那些不是捕捉事件监听器的事件监听器并执行它们。（即：与触发事件无关的事件监听器也由于冒泡将被执行）。
（二）停止事件冒泡
当事件（例如单击事件）在某一DOM元素上被触发时，事件将沿着该节点的各个父节点冒泡穿过整个DOM节点层次，直到遇到依附有该事件类型处理器的节点。
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/style.css"> <script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script> <script type="text/javascript"> function doSometing(obj,evt){ alert(obj.id); // 做浏览器兼容 var e = (evt)? evt:window.event; //获取IE或非IE浏览器的事件 if (window.event) { //如果是IE浏览器 e.cancelBubble = true; //IE浏览器，设置该属性为true,取消事件冒泡 }else{ e.stopPropagation(); //非IE浏览器，该方法取消事件的进一步捕获或冒泡。 } } </script> </head> <body> <div id="parent1" onclick="alert(this.id);" style="width: 250px;background-color: #cacaca"> <p>This is parent1 div</p> <div id="child1" onclick="alert(this.id);" style="width: 200px;background-color: orange"> <p>This is child1.Will bubble.</p> </div> </div> <br> <div id="parent2" onclick="alert(this.id);" style="width: 250px;background-color: cyan;"> <p>This is parent2 div</p> <div id="child2" onclick="doSomething(this,event);" style="width: 200px;background-color: #aeaeae"> <p>This is child2.</p> </div> </div> </div> </body> </html> |
如图所示，以上代码定义了4个div，其中2个父div，2个子div。单击每个div都会弹出一个消息框，显示其id。单击child1和child2时，事件会冒泡传导到其父元素parent1和parent2。因此，单击child1会弹出两个消息框。而单击child2时，会调用doSomethig函数，使用cancelBubble属性或stopPropagation()方法来停止事件冒泡。
（三）阻止事件的默认行为
事件的默认行为是指浏览器在事件传递和处理完成后自动执行的与该事件关联的默认动作。例如，单击一个超链接的默认行为是访问其定义的url。
IE和其他浏览器阻止事件的默认行为的方法不同。在IE中，可以通过设置event对象的returnValue属性为false来阻止事件的默认行为；在其他浏览器中，则可以通过设置event对象的preventDefault()方法来实现。
|
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="http://www.mamicode.com/style.css"> <script type="text/javascript" src="http://www.mamicode.com/jquery.js"></script> <script type="text/javascript"> window.onload = function(){ var test = document.getElementById(‘test‘); test.onclick = function(e){ //当单击此超链接时执行这个函数 alert(‘URL:‘ + this.href + ‘,不会跳转‘); stopDefault(e); } } function stopDefault(e){ if(e && e.preventDefault){ //判断浏览器是非IE浏览器 e.preventDefault(); //非IE浏览器下使用preventDefault方法 }else{ //IE浏览器下令事件（window.event）的returnValue属性为false; window.event.returnValue = http://www.mamicode.com/false; } return false; } </script> </head> <body> <a href="http://www.baidu.com" id="test">百度</a> </body> </html> |
可以通过event对象的preventDefault属性来判断浏览器是否支持preventDefault()方法。如果preventDefault属性值为true则表示支持，否则不支持。
JavaScript事件——冒泡、捕获