三个阶段
- 捕捉阶段：捕捉阶段是先从父元素开始一级级向上查问子元素的
- 处于指标阶段：事件从最顶层的子节点一步步冒泡到各级父元素阶段
- 冒泡阶段
如何查看以后事件的阶段？
办法：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反对
发表回复