一、DOM事件流
- DOM事件流（event flow）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段，事件冒泡和事件捕获都是描述事件触发时序问题的术语；
- 事件捕获（event capturing）：当鼠标点击或触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应事件的话，会先触发父元素绑定的事件，是自上而下的；
事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行传播，直到根节点，是自下而上的； - 无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就是事件传播，它就像一根引线，只有通过引线才能将绑在引线上的鞭炮（事件监听器）引爆；
DOM事件流
三个阶段:1-5捕获过程、5-6目标过程、6-10冒泡过程
二、事件绑定方法：addEventListener、attachEvent - addEventListener
document.getElementById("child").addEventListener("click", function(e) {
console.log("child事件被触发，" + this.id)
},true)
- attachEvent
element.attachEvent('onclick', function(){
// ...
});
三、事件冒泡
- 绑定事件方法的第三个参数，就是控制事件触发顺序是否为事件捕获，true为事件捕获，false为事件冒泡，默认为false即事件冒泡，JQuery的e.stopPropagation会阻止冒泡，意思是到我为止，我的上一级的事件就不要触发了；
// 事件冒泡
<body>
<div id="parent">
<div id="child" class="child">child</div>
</div>
<script type="text/javascript">
document.getElementById("parent").addEventListener("click", function(e) {
console.log("parent事件被触发，" + this.id);
})
document.getElementById("child").addEventListener("click", function(e) {
console.log("child事件被触发，" + this.id)
})
// child事件被触发，child
// parent事件被触发，parent
</script>
</body>
二、事件捕获
// 事件捕获
<body>
<div id="parent">
<div id="child" class="child">child</div>
</div>
<script type="text/javascript">
document.getElementById("parent").addEventListener("click", function(e) {
console.log("parent事件被触发，" + this.id);
},true)
document.getElementById("child").addEventListener("click", function(e) {
console.log("child事件被触发，" + this.id)
},true)
// parent事件被触发，parent
// child事件被触发，child
</script>
</body>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<style>
#parent {
width: 200px;
height: 200px;
text-align: center;
line-height: 3;
background: green;
}
#child {
width: 100px;
height: 100px;
margin: 0 auto;
background: orange;
}
</style>
</head>
<body>
<div id="parent">
父元素
<div id="child">
子元素
</div>
</div>
<script type="text/javascript">
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.body.addEventListener("click", function(e) {
console.log("click-body");
}, false);
parent.addEventListener("click", function(e) {
console.log("click-parent");
}, false);
//新增事件捕获事件代码
parent.addEventListener("click", function(e) {
console.log("click-parent--事件捕获");
}, true);
child.addEventListener("click", function(e) {
console.log("click-child");
// e.stopPropagation(); // 停止事件传播
}, false);
</script>
</body>
</html>
事件冒泡和事件捕获
<style type="text/css">
#wrapDiv, #innerP, #textSpan{
margin: 5px;padding: 5px;box-sizing: border-box;cursor: default;
}
#wrapDiv{
width: 300px;height: 300px;border: indianred 3px solid;
}
#innerP{
width: 200px;height: 200px;border: hotpink 3px solid;
}
#textSpan{
display: block;width: 100px;height: 100px;border: orange 3px solid;
}
</style>
</head>
<body>
<div id="wrapDiv">wrapDiv
<p id="innerP">innerP
<span id="textSpan">textSpan</span>
</p>
</div>
<script>
var wrapDiv = document.getElementById("wrapDiv");
var innerP = document.getElementById("innerP");
var textSpan = document.getElementById("textSpan");
// 捕获阶段绑定事件
window.addEventListener("click", function(e){
console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
document.addEventListener("click", function(e){
console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
document.documentElement.addEventListener("click", function(e){
console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
document.body.addEventListener("click", function(e){
console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
wrapDiv.addEventListener("click", function(e){
console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
innerP.addEventListener("click", function(e){
console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
textSpan.addEventListener("click", function(e){
console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
}, true);
// 冒泡阶段绑定的事件
window.addEventListener("click", function(e){
console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.addEventListener("click", function(e){
console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.documentElement.addEventListener("click", function(e){
console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.body.addEventListener("click", function(e){
console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
wrapDiv.addEventListener("click", function(e){
console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
innerP.addEventListener("click", function(e){
console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
textSpan.addEventListener("click", function(e){
console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
</script>
</body>
- target和currentTarget都是event上面的属性，target是真正发生事件的DOM元素，而currentTarget是当前事件发生在哪个DOM元素上；目标阶段也就是 target == currentTarget的时候，由于window没有nodeName这个属性，所以是undefined；
-
在目标元素上不会遵守先发生捕获后发生冒泡这一规则，而是先绑定的事件先发生；
事件冒泡和事件捕获案例2
五、事件委托
var parent = document.getElementById("parent");
var child = document.getElementById("child");
parent.onclick = function(e) {
if (e.target.id == "child") {
console.log("您点击了child元素")
}
if (e.target.id == "parent") {
console.log("您点击了parent元素")
}
}
六、事件绑定的方法
- 直接获取元素绑定：
element.onclick = function(e){
// ...
};
优点：简单和稳定，可以确保它在你使用的不同浏览器中运作一致；处理事件时，this关键字引用的是当前元素，这很有帮组;
缺点：只会在事件冒泡中运行；一个元素一次只能绑定一个事件处理函数，新绑定的事件处理函数会覆盖旧的事件处理函数；事件对象参数(e)仅非IE浏览器可用;
- 直接在元素里面使用事件属性：
- W3C方法：
element.addEventListener('click', function(e){
// ...
}, false);
优点：该方法同时支持事件处理的捕获和冒泡阶段；事件阶段取决于addEventListener最后的参数设置：false (冒泡) 或 true (捕获)；在事件处理函数内部，this关键字引用当前元素；事件对象总是可以通过处理函数的第一个参数(e)捕获；可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件;
缺点：IE不支持，你必须使用IE的attachEvent函数替代;
- IE下的方法：
element.attachEvent('onclick', function(){
// ...
});
优点：可以为同一个元素绑定你所希望的多个事件，同时并不会覆盖先前绑定的事件;
缺点：IE仅支持事件捕获的冒泡阶段；事件监听函数内的this关键字指向了window对象，而不是当前元素（IE的一个巨大缺点）；事件对象仅存在与window.event参数中；事件必须以ontype的形式命名，比如，onclick而非click；仅IE可用，你必须在非IE浏览器中使用W3C的addEventListener；
注意：不是意味这低版本的ie没有事件捕获，它也是先发生事件捕获，再发生事件冒泡，只不过这个过程无法通过程序控制；
七、解除事件
element.removeEventListener('click', function(e){
// ...
}, false);
IE:
element.detachEvent('onclick', function(){
// ...
});
八、阻止事件
在支持addEventListener()的浏览器中，可以调用事件对象的stopPropagation()方法以阻止事件的继续传播，如果在同一对象上定义了其他处理程序，剩下的处理程序将依旧被调用，但调用stopPropagation()之后任何其他对象上的事件处理程序将不会被调用，不仅可以阻止事件在冒泡阶段的传播，还能阻止事件在捕获阶段的传播；
IE9之前的IE不支持stopPropagation()方法，而是设置事件对象cancelBubble属性为true来实现阻止事件进一步传播；
九、阻止事件的默认行为
e.preventDefault()可以阻止事件的默认行为发生，默认行为是指：点击a标签就转跳到其他页面、拖拽一个图片到浏览器会自动打开、点击表单的提交按钮会提交表单等等，因为有的时候我们并不希望发生这些事情，所以需要阻止默认行为；
IE9之前的IE中，可以通过设置事件对象的returnValue属性为false达到同样的效果；
function cancelHandler(event){
var event=event||window.event;//兼容IE
//取消事件相关的默认行为
if(event.preventDefault) //标准技术
event.preventDefault();
if(event.returnValue) //兼容IE9之前的IE
event.returnValue=false;
return false; //用于处理使用对象属性注册的处理程序
}
