更新日期：2022/04/11 只要我们一起大笑，可怕的东西就会跑光光了。
Event 事件
属性 说明 bubbles 一个布尔值，用来表示该事件是否会在 DOM 中冒泡 cancelable 一个布尔值，表示事件是否可以取消 composed 一个布尔值，表示事件是否可以穿过 Shadow DOM 和常规 DOM 之间的隔阂进行冒泡 currentTarget 返回其事件监听器触发该事件的元素，它是有可能在重定向的过程中被改变的 defaultPrevented 一个布尔值，表示 event.preventDefault() 方法是否取消了事件的默认行为 eventPhase 返回事件传播的当前阶段 target 返回触发此事件的元素（事件的目标节点） timeStamp 事件创建时的时间戳（精度为毫秒） type 事件的类型，不区分大小写 isTrusted 表示事件是由浏览器（例如用户点击）发起的，还是由脚本（使用事件创建方法，例如 Event.initEvent）发出的
方法 说明 composedPath() 返回事件的路径 preventDefault() 取消事件（如果该事件可取消） stopImmediatePropagation() 阻止监听同一事件的其他事件监听器被调用 stopPropagation() 停止冒泡，阻止事件在 DOM 中继续冒泡
addEventListener() 方法用于向指定元素添加事件句柄。注意：不要使用 “on” 前缀。 例如：使用 “click” 而不是使用 “onclick”。
element. addEventListener ( type, listener[ , useCapture] ) ;
使用 addEventListener 的时候，会发现没有反应，F12 打开控制台发现报错了：Uncaught TypeError: Cannot read properties of null (reading 'addEventListener') 无法读取空属性，显而易见，JavaScript 在文档没有加载完就调用导致没有获取到对象，所以要加上 onload 等页面载入完毕后再执行 Javascript 代码。
removeEventListener() 方法用来移除 addEventListener() 方法添加的事件句柄。如果同一个监听事件分别为“事件捕获”和“事件冒泡”注册了一次，这两次事件需要分别移除。两者不会互相干扰。移除捕获监听器不会影响非捕获版本的相同监听器，反之亦然。
element. removeEventListener ( type, listener[ , useCapture] ) ;
addEventListener() 方法允许向同一个元素添加多个事件，且不会覆盖已存在的事件。下面的例子中，第二次点击将会取消第一次添加的监听，从随机数不再变化可以看出确实是取消了。
dispatchEvent() 方法用来向一个指定的事件目标派发一个事件, 并以合适的顺序同步调用目标元素相关的事件处理函数。要向事件对象添加更多数据，可以使用 CustomEvent 接口，detail 属性可用于传递自定义数据。
var event = new Event ( 'build' ) ;
var customEvent= new CustomEvent ( 'build' , { 'detail' : element. dataset. time } ) ;
element. addEventListener ( 'build' , function ( e ) { ... } , false ) ;
element. dispatchEvent ( event) ;
与浏览器原生事件不同，原生事件是由 DOM 派发的，并通过 event loop 异步调用事件处理程序，而 dispatchEvent() 则是同步调用事件处理程序。在调用 dispatchEvent() 后，所有监听该事件的事件处理程序将在代码继续前执行并返回。
事件监听器可以被指定为回调函数或实现 EventListener 的对象，每当注册的事件发生的时候，handleEvent() 方法都会被调用（只要它拥有 handleEvent 方法）。
< script>
onload = function ( ) {
const demo = document. getElementById ( "demo" ) ;
const btn = document. getElementById ( "btn" ) ;
let handleEvent = {
name : "Ouseki " ,
handleEvent : function ( e ) {
switch ( e. type) {
case "click" :
demo. innerHTML = "click event " + this . name + e. timeStamp;
break ;
case "mouseover" :
demo. innerHTML = "mouseover event " + this . name + e. timeStamp;
break ;
}
}
} ;
btn. addEventListener ( 'click' , handleEvent, false ) ;
btn. addEventListener ( 'mouseover' , handleEvent, false ) ;
}
</ script> < div> < h3id = " demo" > </ h3> < buttonid = " btn" type = " button" > </ button> </ div> 1. 普通函数中的 this 指向事件源。而实现 EventListener 接口对象的 this 指向对象本身；handleEvent() 作为对象中的一个属性可以动态更改（重新赋值即可）；
事件句柄 描述 click 在元素上按下并释放任意鼠标按键 contextmenu 右键点击（在右键菜单显示前触发） dblclick 在元素上双击鼠标按钮 mousedown 在元素上按下任意鼠标按钮 mouseenter 指针移到有事件监听的元素内 mouseleave 指针移出元素范围外（不冒泡） mousemove 指针在元素内移动时持续触发 mouseover 指针移到有事件监听的元素或者它的子元素内 mouseout 指针移出元素，或者移到它的子元素上 mouseup 在元素上释放任意鼠标按键 pointerlockchange 鼠标被锁定或者解除锁定发生时 pointerlockerror 可能因为一些技术的原因鼠标锁定被禁止时 select 有文本被选中 wheel 滚轮向任意方向滚动
事件句柄 描述 keydown 按下任意按键 keypress 除 Shift、Fn、CapsLock 外的任意键被按住（连续触发） keyup 释放任意按键
事件句柄 描述 drag 正在拖动元素或文本选区（在此过程中持续触发，每 350ms 触发一次） dragend 拖放操作结束。（松开鼠标按钮或按下 Esc 键） dragenter 被拖动的元素或文本选区移入有效释放目标区 dragstart 用户开始拖动 HTML 元素或选中的文本 dragleave 被拖动的元素或文本选区移出有效释放目标区 dragover 被拖动的元素或文本选区正在有效释放目标上被拖动 （在此过程中持续触发，每350ms触发一次） drop 元素在有效释放目标区上释放
事件句柄 描述 error 资源加载失败时 abort 正在加载资源已经被中止时 load 资源及其相关资源已完成加载 beforeunload window，document 及其资源即将被卸载 unload 文档或一个依赖资源正在被卸载
事件句柄 描述 online 浏览器已获得网络访问 offline 浏览器已失去网络访问
事件句柄 描述 focus 元素获得焦点（不会冒泡） blur 元素失去焦点（不会冒泡）
事件句柄 描述 open WebSocket 连接已建立 message 通过 WebSocket 接收到一条消息 error WebSocket 连接异常被关闭（比如有些数据无法发送） close WebSocket 连接已关闭
事件句柄 描述 pagehide 正在从一个会话历史条目中进行遍历 pageshow 会话历史条目正在被遍历 popstate 正在导航到会话历史条目(在某些情况下)
事件句柄 描述 animationstart 某个 CSS 动画开始时触发 animationend 某个 CSS 动画完成时触发 animationiteration 某个 CSS 动画完成后重新开始时触发
事件句柄 描述 transitionstart 一个CSS转换实际上已经启动(在任何延迟之后触发) transitioncancel CSS过渡被取消 transitionend CSS过渡已经完成 transitionrun 一个CSS转换已经开始运行(在任何延迟启动之前触发)
事件句柄 描述 reset 点击重置按钮 submit 点击提交按钮
事件句柄 描述 beforeprint 打印机已经就绪时触发 afterprint 打印机关闭时触发
事件句柄 描述 compositionstart 准备好一段文本的组成(类似于键盘输入的 keydown，但可用于其他输入，如语音识别) compositionupdate 一个字符被添加到一段正在编写的文本中 compositionend 文本的写作已完成或取消
事件句柄 描述 fullscreenchange 元素已切换到全屏模式或返回正常模式 fullscreenerror 由于技术原因或权限被拒绝，无法切换到全屏模式 resize 文档视图已调整大小 scroll 文档视图或元素已滚动
事件句柄 描述 cut 已经剪贴选中的文本内容并且复制到了剪贴板 copy 已经把选中的文本内容复制到了剪贴板 paste 从剪贴板复制的文本内容被粘贴
事件句柄 描述 audioprocess ScriptProcessorNode的输入缓冲区已准备好被处理 canplay 浏览器可以播放媒体，但估计没有加载足够的数据来播放媒体直到其结束，而不必为进一步缓冲内容而停止 canplaythrough 浏览器估计它可以将媒体播放到最后，而不会因为内容缓冲而停止 complete 终止对 OfflineAudioContext 的渲染 durationchange 持续时间属性已被更新 emptied 媒体已经变空；例如，如果媒体已经被加载（或部分加载），并调用 load() 方法重新加载，就会发送此事件 ended 播放已经停止，因为已经到达媒体的终点 loadeddata 媒体的第一帧已完成加载 loadedmetadata 元数据已加载 pause 播放已暂停 play 播放已开始 playing 在因缺乏数据而暂停或延迟后，播放已准备好开始 ratechange 播放速率已更改 seeked 一个查找操作完成 seeking 开始了一次寻找行动 stalled 用户代理正试图获取媒体数据，但数据意外地没有得到。 suspend 媒体数据加载已暂停 timeupdate currentTime 属性指示的时间已更新 volumechange 音量发生了变化 waiting 由于暂时缺少数据，播放已停止
事件句柄 描述 abort 进度已终止（不是由于错误） error 进度失败 load 进度顺利 loadend 进度已经停止（在 “错误”、"中止 "或 "加载 "被派发后） loadstart 进度已经开始 progress 正在进行中 timeout 由于预设时间到期，进度终止
事件句柄 描述 storage 当存储区域（localStorage 或 sessionStorage）被修改时，将触发 storage 事件
只要我们一起大笑，可怕的东西就会跑光光了。
扫一扫
471
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
