44 lines
3.9 KiB
Markdown
44 lines
3.9 KiB
Markdown
# js事件
|
||
- ## js event
|
||
- 对于可以触发事件的对象，其会有一个addEventListener方法，通过该方法，可以为对象的特定事件注册handler。addEvnetListener接受两个参数：
|
||
- event name
|
||
- event handler
|
||
- 对于js语言，在不同的环境下，event model可能会有所不同，例如在web浏览器环境下和nodejs环境下，event model就不完全相同
|
||
- 可以通过removeEventHandler来移除handler，该方法同样接收两个参数，event name和handler
|
||
- ## 在js中为事件添加复数个handler
|
||
- 通过多次调用addEventHandler，可以为同一个事件添加多个handler，在事件发生后，多个handler都会被调用
|
||
- ## Event Handler Properties
|
||
- 在js中，如果一个对象能够触发某个事件，通常该对象会有一个onxxx属性，例如onclick、onmouseover等。可以通过为该属性赋值一个函数来为该事件添加handler
|
||
```javascript
|
||
let p=document.querySelector("#bt")
|
||
p.onclick=()=>{
|
||
alert("button is clicked")
|
||
}
|
||
```
|
||
- 但是，通过为对象的onclick属性赋值，无法为该对象的同一个事件添加多个handler，对onclick属性的多次赋值，之后的赋值操作会覆盖前面的赋值操作
|
||
- ## inline event handler（不推荐）
|
||
- 可以在html文件中为标签的onxxx属性指定调用的js方法来为事件添加handler，但是这种方法永远不应该被使用
|
||
- 使用inline event handler时，如果多个元素都为相同事件添加相同的handler，那么相同的函数调用代码将会在html文件中重复多次，修改会花费大量时间
|
||
- 并且，使用inline event handler会令js代码和html代码糅合在一起，最好将js代码和html代码分开
|
||
- ## event对象
|
||
- handler的参数中可以含有一个event对象，用来记录触发事件的信息，例如event.target记录了指向触发事件的对象的引用
|
||
- 可以通过event.preventDefault()方法来取消浏览器为该事件定义的默认处理。
|
||
- 可以通过event.stopProgation()方法阻止该事件的传播
|
||
- 通过return false，默认会同时调用event.preventDefault和event.stopProgation
|
||
- ## 事件传播的三个阶段
|
||
- capturing阶段：
|
||
- 捕获阶段首先会检查触发事件元素的最外层元素（html），检查其是否注册了capture阶段的handler，如果注册了就运行handler
|
||
- 然后其会移动到html内部元素并做相同的事情，如果元素有注册capture阶段handler就执行，并依次向内移动，直到遇到触发事件元素的直接父元素
|
||
- target阶段：
|
||
- 首先，target阶段会检查EventTarget是否有为event注册的handler，如果有就运行它
|
||
- 如果，event的bubbles为true，其会将event事件传播给EventTarget元素的父元素，并以此向上传播，直到到达html元素；如果bubbles为false，则event不会被向上传播给EventTarget的任何父元素
|
||
- bubbling阶段：
|
||
- 检查是否EventTarget的直接父元素为bubbling阶段注册了handler，如果有就运行
|
||
- 对EventTarget父元素的父元素做同样的事，检查是否为bubbling阶段注册有handler，如果有就执行，依次向上传播，直到到达html元素
|
||
- >对于所有的js事件，都会经历capturing阶段和target阶段，但是只有bubbles属性为true的事件才会经历bubbling阶段
|
||
- > 对于target阶段，对于EventTarget，无论是为capturing阶段注册的handler还是为bubbling阶段注册的handler都会被执行
|
||
- > addEventListener默认情况下注册的阶段是bubbling，可以为其制定useCapture为true(默认为false)来指定注册的listener为capturing阶段
|
||
- > 可以在event handler中调用event.stopPropagation来阻止事件在bubbling过程中向上传播
|
||
- ## event.target和event.currentTarget
|
||
- event.target：触发事件的元素
|
||
- event.currentTarget：当前handler所附加到的元素（在bubbling阶段时间传播到的上层祖先节点） |