监听函数

三种绑定监听函数的方式

HTML的on-属性

<div onclick="doSomething()">click</div>

1. 这种方式指定的监听代码，只会在冒泡阶段执行

   元素节点的事件属性

   div.onclick = function() {
    console.log("click");
   }

2. 这种方式也只是在冒泡阶段执行

   addEventTarget()

   事件监听中的this

3. this指向触发事件的元素节点

   事件的传播

   事件的传播(propagation)分为三个阶段：

• 第一阶段：从window对象传导到目标节点，为“捕获阶段”（capture phase）
• 第二阶段：在目标元素上触发事件，为“目标阶段”（target phase）
• 第三阶段：从目标元素传导回window对象，为“冒泡阶段”(bubblng phase)

  事件的代理

1. 由于事件具有冒泡的特性，因此可以把子节点的监听函数定义在父节点，由父节点统一处理

   ul.addEventListener("click",funcition(e){
    if (e.target.tagName.toLowerCase()==="li"){
        // dosomething
    }                    
   },false);

   stopPropagation

2. 阻止事件的传播

3. 可以用在捕获阶段和冒泡阶段