事件

1 事件流

1.1 事件冒泡

事件沿着DOM树向上传播，一直传播到document对象

1.2 事件捕获

从document往下传播

1.3 DOM事件流

2 事件处理程序

事件是用户或浏览器自身执行的某种动作，如click load mouseover都是事件的名字

而响应事件的函数叫事件处理程序，事件处理程序以 on 开头
如 onclick onmouseover onload

2.1 HTML事件处理程序

<!-- this 等于这个元素 -->
<button name="btn" onclick="showMsg(this.name)">click</button>

function showMsg(name){
    console.log(name)
}

2.2 DOM0级事件处理程序

首先获取元素引用，然后将一个函数赋值给事件处理属性

<button name="btn" id="btn">click</button>

let btn = document.querySelector("#btn");
btn.onclick = function(e){
    console.log(e)
    // this指代元素
    console.log(this.name) // btn
}

2.3 DOM2级事件处理函数

DOM2级中定义了两个方法，用于指定和删除事件处理程序的操作
addEventListener()
removeEventListener()

他们都接受三个参数， 要处理的事件名 处理函数 布尔值(true表示在事件捕获阶段调用事件处理函数 false表示在事件冒泡阶段调用事件处理函数)

addEventListener()与removeEventListener()
参数必须一模一样，否则removeEventListener()无效，如果传入的事件处理函数是一个匿名函数，会无效

<button name="btn" id="btn">click</button>

let btn = document.querySelector("#btn");
btn.addEventListener("click" , handler , false)
function handler(e){
    console.log(e)
    // this指代元素
    console.log(this.name) // btn
}
btn.removeEventListener("click" , handler , false) // 又取消了绑定在btn的事件处理函数

大多数情况下将事件处理程序添加到事件流的冒泡阶段

3 事件对象

通过HTML特性指定事件处理程序时，event 中保存 event对象

<button name="btn" id="btn" onclick="handler(event)">click</button>

阻止特定事件的默认行为
preventDafault()
比如链接的的默认行为时单击时导航到指定URL,我们要阻止他

<a id="link" href="www.baidu.com">baidu</a>

let link = document.getElementById("link");
link.onclick = function(event){
    event.preventDefault()
}

stopPropagation()用于立即停止事件在DOM中传播，即取消进一步事件捕获或冒泡
例如父子div都有click事件，点击子元素时也会触发父元素绑定的事件，但我们不希望出发父元素事件

<div id="father" style="width: 300px;height:300px;border:1px solid black">
    <div id="son" style="width: 100px;height:100px;border:1px solid black">son</div>
</div>

let father = document.getElementById("father");
let son = document.getElementById("son");
let eventFather = function(){
    console.log('father')
}
let eventSon = function(event){
    console.log('son')
    event.stopPropagation()
}
father.addEventListener("click" , eventFather , false)
son.addEventListener("click" , eventSon , false)

4 事件类型

5 内存和性能

5.1 事件委托

5.2 移除事件处理处理程序

6 模拟事件