書接上文！上文講到useCapture。
這個是官網給的解釋。反正看的似懂非懂
- true - 事件句柄在捕獲階段執行
- false- false- 預設。事件句柄在冒泡階段執行
我個input加了一個父節點，同時給他也加一個彈出事件。彈出 hello 子元素彈出 你好
現在是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>
寫到這裡 我感覺有必要寫一下 事件的捕獲 目标 冒泡!
還有一個委托 !