浏览器事件机制三个阶段

事件捕获阶段

1
2
3
4
5
6
//捕获阶段注册事件
   document.getElementById("button").addEventListener("click",function(event){
            console.log("button");
            event.stopPropagation(); //阻止事件捕获
            event.stopImmediatePropagation(); //阻止其他事件（包括默认事件）
        },true);

处于目标阶段

事件冒泡阶段

1
2
3
4
5
//冒泡阶段注册事件
   document.getElementById("button").addEventListener("click",function(event){
            console.log("button");
            event.stopPropagation(); //阻止冒泡
        },false);

事件委托

原理

  1. 利用事件冒泡机制

优势

  1. 减少内存
  2. 动态注册事件