document.addEventListener("click", function(e){},true); The
third parameter has two values (true: capture false: bubbling), the default is false;
capture: trigger step by step from the outside to the inside;
take Bubble: Trigger step by step from the inside to the outside;
stop the event from bubbling: e.stopPropagation();
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
#wrapDiv, #innerP, #textSpan{
margin: 5px;padding: 5px;box-sizing: border-box;cursor: default;
}
#wrapDiv{
width: 300px;height: 300px;border: indianred 3px solid;
}
#innerP{
width: 200px;height: 200px;border: hotpink 3px solid;
}
#textSpan{
display: block;width: 100px;height: 100px;border: orange 3px solid;
}
</style>
</head>
<body>
<div id="wrapDiv">wrapDiv
<p id="innerP">innerP
<span id="textSpan">textSpan</span>
</p>
</div>
<script>
var wrapDiv = document.getElementById("wrapDiv");
var innerP = document.getElementById("innerP");
var textSpan = document.getElementById("textSpan");
//绑定监听事件
// function addEventHandler(target,type,fn,kind){
// var kindO = kind ? kind :false; //默认是冒泡
// if(target.addEventListener){
// target.addEventListener(type,fn,kindO);
// }else{
// // ie8以下
// target.attachEvent("on"+type,fn);
// }
// }
// addEventHandler(window,'click',function(e){
// console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
// }, true)
// 捕获阶段绑定事件
//window > document > document.documentElement > document.body>
// wrapDiv> innerP > textSpan
// window.addEventListener("click", function(e){
// console.log("window 捕获", e.target.nodeName, e.currentTarget.nodeName);
// }, true);
// document.addEventListener("click", function(e){
// console.log("document 捕获", e.target.nodeName, e.currentTarget.nodeName);
// }, true);
// document.documentElement.addEventListener("click", function(e){
// console.log("documentElement 捕获", e.target.nodeName, e.currentTarget.nodeName);
// }, true);
// document.body.addEventListener("click", function(e){
// console.log("body 捕获", e.target.nodeName, e.currentTarget.nodeName);
// }, true);
// wrapDiv.addEventListener("click", function(e){
// console.log("wrapDiv 捕获", e.target.nodeName, e.currentTarget.nodeName);
// }, true);
// innerP.addEventListener("click", function(e){
// console.log("innerP 捕获", e.target.nodeName, e.currentTarget.nodeName);
// }, true);
// textSpan.addEventListener("click", function(e){
// console.log("textSpan 捕获", e.target.nodeName, e.currentTarget.nodeName);
// }, true);
// 冒泡阶段绑定的事件
window.addEventListener("click", function(e){
console.log("window 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.addEventListener("click", function(e){
console.log("document 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.documentElement.addEventListener("click", function(e){
console.log("documentElement 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
document.body.addEventListener("click", function(e){
console.log("body 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
wrapDiv.addEventListener("click", function(e){
console.log("wrapDiv 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
innerP.addEventListener("click", function(e){
console.log("innerP 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
textSpan.addEventListener("click", function(e){
e.stopPropagation();
console.log("textSpan 冒泡", e.target.nodeName, e.currentTarget.nodeName);
}, false);
</script>
</body>
</html>
Remove listening event compatible with IE8
var dom = document.getElementById("#dom");
var fun1 = function(){
console.log("fun1")
}
//事件监听
dom.addEventListener("click",fun1);
//事件移除
dom.removeEventListener("click",fun1);
//ie6~ie8
dom.attchEvent("onclick",fun1);