事件链冒泡捕获与代理

事件分为: 事件捕获阶段  目标阶段  事件冒泡阶段

event.path记录了阶段过程  默认冒泡阶段触发事件

event.target事件对象中的目标对象当前所在的对象

 addEventListener监听事件 第三个参数true flase都不阻止冒泡  只是设置哪个阶段触发

true 捕获阶段触发  false冒泡阶段触发

要阻止事件传递唯一方式就是阻止事件冒泡:事件对象调用stopPropagation()

 e.stopPropagation() 不会阻止第二次监听事件

e.stopImmediatePropagation()  此代码还会阻止同一个目标的第二次监听事件  写两个 addEventListener的情况

e.preventDefault()  阻止本身点击事件但是不能阻止冒泡

事件链流程:

         捕获阶段 从window->documnet->html->body->box1->box2->box3  

        若box3是被点击元素  box1 box2 绑定了事件 那么返回时 也就是冒泡阶段

冒泡阶段  box3->box2->box1->body->html->document->window  因为box2和box1绑定了所以先打印box2再打印box1

        若点击box1 那么到box1便会冒泡回去  只会打印box1

<div class="box1">
        <div class="box2">
            <div class="box3">

            </div>
        </div>
    </div>

事件代理利用的事件冒泡原理

         事件代理:是一种设计思想 利用事件对象中 引用的目标对象这个技术来实现的

          无论事件触发时 是不是目标对象的监听器 在监听器内部的事件对象event中都可以访问这个事件的目标对象利用这个特点去绑定事件给父级元素 来代理子级元素的业务  这种设计就是事件代理

传统点击事件:

 这样的设计有两个缺点
         1.静态的事件绑定 如果动态的添加元素进去 添加进去的元素没有这个事件
         2.性能消耗更高 业务却比较相同

         var box2=document.querySelectorAll(".box2")
         box2.forEach(el => {
             el.addEventListener("click",function(e){
                       console.log(this.innerHTML);
             })
         });
        

事件代理:

e.target.innerHTML执行的是当前被点击事件 监听的box1 打印box2

var box1=document.querySelector(".box1")
         box1.addEventListener("click",function(e){
             console.log(e.target.innerHTML);//点击box2冒泡上去执行box1监听 事件对象还是box2
         })