事件冒泡、事件捕获、事件委托知识点汇总

事件冒泡、事件捕获、事件委托

事件冒泡：从当前触发的事件目标一级一级往上传递，依次触发，直到document为止

事件捕获：从document开始触发，一级一级往下传递，依次触发，直到真正事件目标为止

事件委托：即是把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件代理的原理是DOM元素的事件冒泡

先捕获，后冒泡

 // 事件冒泡  young==> son==>father 
        document.getElementsByClassName('father')[0].addEventListener('click',function(){console.log('我是父亲')},false)
        document.getElementsByClassName('son')[0].addEventListener('click',function(){console.log('我是儿子')},false)
        document.getElementsByClassName('young')[0].addEventListener('click',function(){console.log('我是最小的')},false)

// 事件捕获 father==> son==> young==>
        document.getElementsByClassName('father')[0].addEventListener('click',function(){console.log('我是父亲')},true)
        document.getElementsByClassName('son')[0].addEventListener('click',function(){console.log('我是儿子')},true)
        document.getElementsByClassName('young')[0].addEventListener('click',function(){console.log('我是最小的')},true)

//控制台打印顺序为  
我是父亲 ==>我是儿子 ==>我是最小的 ==>我是最小的 ==>我是儿子 ==>我是父亲 


//事件捕获 
    var item1 = document.getElementById("goSomewhere");
    var item2 = document.getElementById("doSomething");
    var item3 = document.getElementById("sayHi");
 
    document.addEventListener("click", function (event) {
      var target = event.target;
      switch (target.id) {
        case "doSomething":
          document.title = "事件委托";
          break;
        case "goSomewhere":
          location.href = "http://www.baidu.com";
          break;
        case "sayHi": alert("hi");
          break;
      }
    })

取消冒泡

document.getElementsByClassName('son')[0].addEventListener('click',function(event){
            event.stopPropagation()
            console.log('我是儿子')},false)

取消中间层冒泡，就不会再往上冒泡，但是底层的冒泡仍然不会受到影响