书接上文！上文讲到useCapture。
这个是官网给的解释。反正看的似懂非懂
- true - 事件句柄在捕获阶段执行
- false- false- 默认。事件句柄在冒泡阶段执行
现在是false 点击按钮 出现 你好 再出现 hello
改成true 点击按钮 先出现 hello 再出现 你好！
个人总结：false的话 就是事件冒泡了 从子元素到父元素
true的话 就是事件捕获 从父到子！
以下是个人写的一个demo 供大家参考！代码如下：
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
div{
width: 200px;
height: 200px;
border: 1px solid red;
}
</style>
<script type="text/javascript">
window.onload =function () {
var oBtn =document.getElementById('btn');
var oDiv =document.getElementById('div1');
//compatible writing
function addEvent(ele,eve,fn){
if(ele.attachEvent){
ele.attachEvent('on'+eve,fn);
}else{
//请修改这个boolean值。点击 “按钮”观察效果
ele.addEventListener(eve,fn,true);
}
}
addEvent(oBtn,'click',function(){
alert('你好！');
});
addEvent(oDiv,'click',function(){
alert('hello！');
});
}
</script>
</head>
<body>
<div id="div1">
<input type="button" value="按钮" id="btn">
</div>
</body>
</html>写到这里 我感觉有必要写一下 事件的捕获 目标 冒泡!
还有一个委托 !