事件

事件表示其实就是或浏览器的更多示例文档的时刻，就是用脚本来实现与 html 进行 Java 更频繁的事件实现的

事件流

流事件的就是广播接收事件的分类顺序，一种是事件的类型，一种是事件描述的主要播放流，

事件冒泡流

上升事件向上传递给一个具体的元素不断从一个具体的元素上升到上面的一个具体的元素，然后用活动来暗示会从圆心起泡而不是从一个具体的元素开始播放递交

<html>
    <head>

    </head>
    <body>
        <div id="myDiv">Click me</div>
    </body>
</html>

事件冒泡流事件继承顺序：<div> -> <body> -> <html> -> document

事件事件流

事件从同一方向开始与流水线开始传播，恰恰相反，事件的描述将事件的重点流向然后是事件的具体流向，然后是事件的最重要的元素，是事件的最开始向内开始，是元素不断触发，是从元素开始传递，传递给具体的元素，然后用传递给具体的元素，就是从民间广泛传播向心

<html>
    <head>

    </head>
    <body>
        <div id="myDiv">Click me</div>
    </body>
</html>

事件财产流继承顺序：document -> <html> -> <body> -> <div>

DOM 事件流

规定的三个阶段：活动泡了，到达目标，活动冒出DOM2一个规范的活动发起，

先是事件，从外部到内部
然后达到具体的触发这个事件的要素，
事件冒泡，从内到外

例如代码

<div class="container">
  <div class="item">
    <button class='btn'>Click me</button>
  </div>
</div>

const container = document.querySelector('.container')
const item = document.querySelector('.item');
const btn = document.querySelector('.btn');

document.addEventListener('click', (event) => {
  console.log("Document click");
});


document.addEventListener('click', (event) => {
  console.log("Document click when capture");
}, {
  capture: true // 表明在捕获阶段就触发
});



container.addEventListener('click', (event) => {
  console.log("container click");
})

// 捕获阶段
container.addEventListener('click', (event) => {
  console.log("container click when capture");
}, {
  capture: true // 表明在捕获阶段捕获
})

item.addEventListener('click', (event) => {
  console.log("item click");
})

btn.addEventListener('click', (event) => {
  console.log("btn click")
})

输出“捕获时单击文档”“捕获时单击容器”“btn 单击”“项目单击”“容器单击”“文档单击”

输出说明事件流会先进行事件流(从外向内流向目标)

事件委托

事件委托如果有很多元素要写事件监听（也就是事件处理程序），那么可以给所有元素的共同父添加一个事件处理程序，然后在子元素上触发的事件就是泡冒流的存在最终会传递给父元素，所以在父元素上也可以监听到在子元素上触发的事件，从而提高效果

例如

<ul id="myLink">
    <li id="goSomeWhere">goSomeWhere</li>
    <li id="doSomeThing">doSomething</li>
    <li id="sayHi">sayHi</li>
</ul>

没有事件委托的代码

const item1 = document.querySelector("#goSomeWhere");
const item2 = document.querySelector("#doSomeThing");
const item3 = document.querySelector("#sayHi");

item1.addEventListener('click', (e) => {
    location.href = "http://www.baidu.com";
})

item2.addEventListener('click', (e) => {
    document.title = 'Change Document title';
})

item3.addEventListener('click', (e) => {
    console.log('Say hi');
})

事件设立，只在父元素上添加一个事件监听

const list = document.querySelector('#myLink');

document.addEventListener('click', (e)=> {
    const target = e.target; // 获取是具体在哪一个元素上触发的事件

    switch(target.id) {
        case 'goSomeWhere':
            location.href = 'http://www.google.com';
            break;
        case 'goSomeWhere':
            document.title = 'Change Document title';
            break;
        case 'sayHi':
            console.log('sayHi');
            break;
    }
})

事件的优点

文件对象随时可用，任何时候都可以给他添加事件监听
收集程序在设置页面上处理事件的时间，只需要在一个DOM上设置事件监听
缩小整个页面所需要的内存，提升整体性能 v

每天一个面试题（5）什么是事件冒泡和事件捕获

事件

事件流

事件冒泡流

事件事件流

DOM 事件流

事件委托

事件的优点