共计 2501 个字符，预计需要花费 7 分钟才能阅读完成。
三个阶段
- 捕捉阶段：捕捉阶段是先从父元素开始一级级向上查问子元素的
- 处于指标阶段：事件从最顶层的子节点一步步冒泡到各级父元素阶段
- 冒泡阶段
如何查看以后事件的阶段？
办法：e.eventPhase：
数值 1 示意: 捕捉阶段 数值 2：指标阶段 数值 3：冒泡阶段
注册事件
创立事件的三种形式
第一种形式：onclick btn.onclick = function () {}无奈给同一个对象的同一个事件注册多个事件处理函数
第二种形式：addEventListener
btn.addEventListener('click', function () {alert('hello world');
})IE9 当前才反对
第三种形式：attachEvent
btn.attachEvent('onclick',function(){alert('hello world');
})只有 IE 老版本浏览器反对,IE6-10
解决注册事件兼容性问题：
// 解决注册事件的兼容性问题
// eventName, 不带 on，click mouseover mouseout
function addEventListener(element, eventName, fn) {
// 判断以后浏览器是否反对 addEventListener 办法
if (element.addEventListener) {element.addEventListener(eventName, fn); // 第三个参数 默认是 false
} else if (element.attachEvent) {element.attachEvent('on' + eventName, fn);
} else {
// 相当于 element.onclick = fn;
element['on' + eventName] = fn;
}
}移除事件
如果想要移除事件，注册事件的时候不能用匿名函数
第一种办法：
var btn = document.getElementById('btn');
btn.onclick=function(){alert('hello world');
// 移除事件
btn.onclick = null;
}第二种办法：罕用
var btn = document.getElementById('btn');
function onClick() {alert('hello liuheng');
btn.removeEventListener('click', onClick);
}
btn.addEventListener('click', onClick);第三种办法：只有 IE9-10 反对 (attachEvent 配套应用)
function onClick(){alert('hello world');
btn.detachEvent('onclick',btnClick);
}
btn.attachEvent('onclick',btnClick);兼容性解决
// 解决移除事件的兼容性解决
function removeEventListener(element, eventName, fn) {if (element.removeEventListener) {element.removeEventListener(eventName, fn);
} else if (element.detachEvent) {element.detachEvent('on' + eventName, fn);
} else {element['on' + eventName] = null;
}
}addEventListener 的第三个参数的作用：
flase: 事件冒泡（内 > 外）
true: 事件捕捉（外 < 内）
btn.onclick和btn.attachEvent只有事件冒泡，没有事件捕捉
事件委托
原理：事件冒泡
e 事件参数（事件对象）：当事件产生的时候，能够获取一些和事件相干的数据。
e.target是真正触发事件的对象
解决兼容性问题：
var target = e.target || e.srcElement;后者是兼容 IE 老版本浏览器
e.currentTarget：事件处理函数所属的对象(和 this 一样)
事件对象
e 是事件对象，在老版本 IE 中获取事件对象的形式：window.event
解决兼容性问题：
e = e || window.event;
e.eventPhase：事件的阶段 1: 捕捉阶段 2：指标阶段 3：冒泡阶段
e.type：获取事件名称（简化注册事件）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#box{
width: 100px;
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById('box');
box.onclick= fn;
box.onmouseover = fn;
box.onmouseout = fn;
function fn(e){
e = e || window.event;
switch(e.type){
case 'click':
console.log('点击 box');
break;
case 'mouseover':
console.log('鼠标通过 box');
break;
case 'mouseout':
console.log('鼠标来到 box');
break;
}
}
</script>
</body>
</html>
勾销默认行为执行
return false(罕用)- DOM 规范办法：
e.preventDefault
- IE 的老版本，非标准形式
e.returnValue = false
进行事件流传，勾销冒泡
e.stopPropagation();: 规范的 DOM 办法e.cancelBubble = true：非标准的 DOM 办法，老版本 IE 反对
