文章目录
js事件
在js中事件是指代表文档与游览器窗口中某个有意义的时刻，
js与HTML的交互就是通过事件来实现的
1.事件流
用于描述页面接收事件的顺序
用一个简单的例子来了解，画4个同心圆，当我们点击圆心上时，
那我们所点击的区域到底算那部分，那我们怎么来理解这个游览器事件
1.1事件冒泡
事件冒泡是指事件从最具体的元素开始触发，然后
向上传播至没有那么具体的元素
<div id="click">click</div>
当点击div时，click事件会沿DOM树一路向上触发每个经过的节点，知道Document
1.2事件捕获
事件捕获与事件冒泡相反，是从不具体到具体的节点。最不具体的节点先收到事件，
最具体的节点最后收到事件
1.3DOM事件流
DOM2规定事件流分为三个阶段
在这里需要在事件捕获的阶段实现的目标《div元素》不会收到事件。
2.事件处理程序
为响应事件而调用的函数称为事件处理程序，又称为事件监听器以“on”开头
2.1HTML事件处理程序
HTML结构中定义事件处理函数
在这里需要注意的是在定义事件函数时，它的属性必须是可执行的js代码
比如
<input type="button" value="click" onclick="console.log('it is ok')">
以上面的方式指定的事件处理程序有一些特殊性
有一个函数来封装属性的值其中有一个特殊的局部变量event。保存event对象，
还有一个重要的地方就是作用域链扩展，在这个函数中所有的元素都可以当作局部变量来访问
<input type="text" name="username" id="01" value="">
<input type="button" value="show username" onclick="console.log(username.value)">
当点击时，会显示文本框的值就不比引用表单元素了
使用HTML事件处理程序的两个问题
- 时机问题：就是HTML元素与函数的先后问题，当HTML后于函数时则会报错
- 事件处理函数作用域链的扩张，会导致在不同的游览器中展示不同的结果
2.2DOM0事件处理函数
在javascript中定义事件处理函数。
选取得要操作对象的引用。然后，将事件处理函数的属性比如（onclick）赋值为一个函数
用于处理
let btn=document.getElementById("myBtn" )
btn.onclick=function(){
console.log("first")
}
2.3DOM事件处理函数
在javascript中定义事件处理函数。增添两个方法addEventListener() 和 removeEventListener()
addEventListener(‘事件名’，‘事件处理函数’，布尔值)
其中布尔值为true时，表示在捕获阶段调用处理函数，为false则表示在冒泡阶段调用处理函数
在大多数情况下，事件处理程序会添加到事件流的冒泡阶段。
因为不同的游览器兼容性好。
如果添加到捕获阶段的话多用于在事件到达指定目标之前拦截事件
2.4IE事件处理程序
- attachEvent()
- detachEvent()
两者都接收两个参数，名字和处理函数
attachEvent()与DOM0中的方式，this是不同的。前者为Window，后者为目标元素。
是因为事件处理函数的作用域不同
2.5跨游览器事件处理函数
用于实现兼容游览器
- addHandler()
根据需要分别使用DOM0,DOM2,或者IE方式来添加事件处理函数
- removeHandler()
移除添加的事件处理函数
let btn = document.getElementById("myBtn")
btn.addHandler = function (element, type, handler) {
//HTML事件处理程序
if (element.addEventListener) {
element.addEventListener(type, handler)
//DOM0
} else if (element.attachEvent) {
element.attachEvent("on" + type, handler)
} else {
element["on" + type] = handler
}
}
3.事件对象
即event对象。
在DOM中发生事件时，所有的信息存储在event对象之间中
3.1DOM事件对象
在这里我们需要了解到event对象是传给事件处理程序的唯一参数。
对于event我们需要了解一些属性和方法
| 属性/方法 | 类型 | 读/写 | 说明 |
|---|---|---|---|
| bubbles | 布尔值 | 只读 | 表示是否冒泡 |
| currentTarget | 元素 | 只读 | 当前事件处理程序所在的元素 |
| target | 元素 | 只读 | 事件目标 |
| type | 字符串 | 只读 | 被触发的事件类型 |
| View | AbstractView | 只读 | 与事件相关的抽象视图，等于事件所发生的window对象 |