8.事件流.js 716 B

1234567891011121314151617181920212223242526272829
  1. var box1 = document.getElementById("box1");
  2. var box2 = document.getElementById("box2");
  3. var box3 = document.getElementById("box3");
  4. var box4 = document.getElementById("box4");
  5. // W3C规定的(万维网联盟)
  6. //DOM事件流:事件捕获阶段 目标阶段 事件冒泡阶段
  7. // 先捕获 后冒泡
  8. // 事件捕获
  9. box1.addEventListener('click',function(){
  10. console.log(this,'box1');
  11. },true)
  12. box2.addEventListener('click',function(){
  13. console.log(this,'box2');
  14. },true)
  15. // 事件冒泡
  16. box3.addEventListener('click',function(){
  17. console.log(this,'box3');
  18. },false)
  19. box4.addEventListener('click',function(){
  20. console.log(this,'box4');
  21. },false)
  22. // removeEventListener(参数1,参数2,参数3)