事件 —【事件的捕获与冒泡】
当你点击了一个事件的时候,系统会先从最外层进行捕获事件到此最深层的事件源,然后在从事件源冒泡到最外层的document。
简单的一个例子,认清事件的执行顺序:
注意IE8和Opera老版本仅支持冒泡事件,不支持捕获事件
<div class="box"> <div class="box1"></div> </div>
父元素和子元素都是捕获事件的时候: 结果为1,2 var box =document.getElementsByClassName('box')[0]; var box1 =document.getElementsByClassName('box1')[0]; box.addEventListener('click',function(){ console.log(1);; },true) box1.addEventListener('click',function(){ console.log(2); },true)
父元素和子元素都是冒泡事件的时候: 结果为2,1 var box =document.getElementsByClassName('box')[0]; var box1 =document.getElementsByClassName('box1')[0]; box.addEventListener('click',function(){ console.log(1);; },false) box1.addEventListener('click',function(){ console.log(2); },false)
父元素为捕获,子元素为冒泡的时候:返回1,2 var box =document.getElementsByClassName('box')[0]; var box1 =document.getElementsByClassName('box1')[0]; box.addEventListener('click',function(){ console.log(1);; },true) box1.addEventListener('click',function(){ console.log(2); },false)
父元素为冒泡,子元素为捕获的时候:返回2,1 var box =document.getElementsByClassName('box')[0]; var box1 =document.getElementsByClassName('box1')[0]; box.addEventListener('click',function(){ console.log(1);; },false) box1.addEventListener('click',function(){ console.log(2); },true)