事件冒泡与事件捕获及事件委托

1.事件冒泡

事件冒泡就是在点击父盒子里面的元素的时候先先触发了子元素的事件,后触发父盒子的事件

 <div class="wrapper">
    <div class="content">
      <div class="box"></div>
    </div>
  </div>

  let wrapper = document.getElementsByClassName('wrapper')[0]
  let content = document.getElementsByClassName('content')[0]
  let box = document.getElementsByClassName('box')[0]
    // 冒泡
  wrapper.addEventListener('click',()=>console.log("wrapper1") ,false)
  content.addEventListener('click',()=>console.log("content1") ,false)
  box.addEventListener('click',()=>console.log("box1") ,false)

点击子元素box后的打印结果如下图,发生了事件冒泡

2.事件捕获

<div class="wrapper"> <div class="content"> <div class="box"></div> </div> </div> let wrapper = document.getElementsByClassName('wrapper')[0] let content = document.getElementsByClassName('content')[0] let box = document.getElementsByClassName('box')[0] // 捕获 wrapper.addEventListener('click',()=>console.log("wrapper") ,true) content.addEventListener('click',()=>console.log("content") ,true) box.addEventListener('click',()=>console.log("box") ,true)

打印的顺序:

但是,当代码可以同时展现捕获和冒泡的时候

 wrapper.addEventListener('click',()=>console.log("wrapper") ,true)
    content.addEventListener('click',()=>console.log("content") ,true)
    box.addEventListener('click',()=>console.log("box") ,true)

    wrapper.addEventListener('click',()=>console.log("wrapper1") ,false)
    content.addEventListener('click',()=>console.log("content1") ,false)
    box.addEventListener('click',()=>console.log("box1") ,false)

就能看出顺序是先捕获后冒泡

讲讲this 掘金中的this

3.addEventListener

addEventListener是DOM2级事件新增的指定事件处理程序的操作，这个方法接收3个参数：要处理的事件名，作为事件处理程序的函数和一个布尔值，最后这个布尔值如果是true，表示在捕获阶段调用事件处理程序；如果是false，表示在冒泡阶段调用事件处理程序。
addEventListener第三个参数

***委托

利用事件冒泡，和事件源对象进行处理
优点：
1. 性能不需要循环所有的元素一个个绑定事件
2. 灵活当有新的子元素时不需要重新绑定事件

例子点击li标签打印对应标签的内容
首要知识:事件对象 event 和事件源对象 event.target

<ul class="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
    <li>7</li>
    <li>8</li>
  </ul>
  //利用事件冒泡将子元素li的点击事件委托到父元素ul上 点击对应的li答应出li的内容
let ul = document.getElementsByClassName('ul')[0]
    ul.onclick = e => {
   
      console.log(e)
      console.log(e.target)
      console.log(e.target.innerText)
    }

补充

focus，blur，change，submit，reset，select 等事件不冒泡
取消冒泡：
W3C标准 event.stopPropagation();但不支持ie9以下版本
IE独有 event.cancelBubble = true;
阻止默认事件:
默认事件 — 表单提交，a标签跳转，右键菜单等
1.return false; 以对象属性的方式注册的事件才生效
2.event.preventDefault(); W3C标注，IE9以下不兼容
3.event.returnValue = false; 兼容IE