事件监听

<script>var d1 = document.getElementById("d1");var d2 = document.getElementById("d2");// d1.onclick = function(e){// } 绑定事件// d1.onclick = null; 解绑事件// 事件监听，domobj.addEventListener(事件类型, 绑定的函数)// 事件监听机制的第三个参数表示 在哪个阶段触发// true表示在 捕获（capture）阶段触发 ，eventPhase 等于 1// d1.addEventListener("click", function(){// console.log("d1>EventListener1>"+event.eventPhase);// }, true);// // false是默认参数，表示在 冒泡（bubble）阶段触发 ，eventPhase 等于 3// d1.addEventListener("click", function(){// console.log("d1>EventListener1>"+event.eventPhase);// });// // 真正点击的目标是 target ，eventPhase 等于 2// d2.addEventListener("click", function(){// console.log("d2>EventListener>"+event.eventPhase)// });// // 所有父元素在事件传递链中都要 传递，包括 document和body// document.body.addEventListener("click", function(){// console.log("body"+event.eventPhase);// });// document.body.addEventListener("click", function(){// console.log("body"+event.eventPhase);// },true);// // 可以在事件监听时将事件 存入变量，这个变量叫 事件句柄（这个函数也可以叫事件句柄：handler）// var handler2 = null;// d1.addEventListener("click", handler2 = function(){// alert("EventListener2");// });// var handler3 = null;// d1.addEventListener("click", handler3 = function(){// alert("EventListener3");// });// 利用事件监听可以做到多个句柄绑定，同时也可以根据逻辑移除某些句柄，这样非常灵活var btn = document.querySelector("input");btn.onclick = function(){d1.removeEventListener("click", handler2)}// over冒泡和捕获的过程d1.addEventListener("mouseover", function(){console.log("d1 > mouseover > "+event.eventPhase);}, false);d1.addEventListener("mouseover", function(){console.log("d1 > mouseover > "+event.eventPhase);}, true);// d2.addEventListener("mouseover", function(){// console.log("d2 > mouseover > "+event.eventPhase);// });</script>