DOM事件流有三个阶段:事件捕获阶段、处于目标阶段、事件冒泡阶段
事件捕获比事件冒泡优先
addEventListener()有三个参数,分别是事件名、函数、布尔值(默认冒泡:false)
<body>
<button>
<span>按钮</span>
</button>
<script>
var body=document.getElementsByTagName('body')[0]
var button=document.getElementsByTagName('button')[0]
var span=document.getElementsByTagName('span')[0]
function fn(){
console.log("我是",this.nodeName);
}
body.addEventListener("click",fn,false)
button.addEventListener("click",fn,false)
span.addEventListener("click",fn,false)
</script>
</body>
<body>
<button>
<span>按钮</span>
</button>
<script>
var body=document.getElementsByTagName('body')[0]
var button=document.getElementsByTagName('button')[0]
var span=document.getElementsByTagName('span')[0]
function fn(){
console.log("我是",this.nodeName);
}
body.addEventListener("click",fn,true)
button.addEventListener("click",fn,true)
span.addEventListener("click",fn,true)
</script>
</body>
可以通过stopProgation()阻止事件冒泡