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

小鱼儿 2022-12-19 09:29 173阅读 0赞

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

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

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

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

###### 先捕获，后冒泡 ######

![img][]

// 事件冒泡 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)

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

[img]: /images/20221120/89ac749e6ff04b31b7ad32dfb70c0a3b.png