We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
各种浏览器都支持
element.onclick = function () {}
未涉及事件级别的定义
增加两个方法用于处理指定和删除事件处理程序的操作：
addEventListener(事件名, 回调函数, 冒泡/捕获)
removeEventListener(事件名, 回调函数, 冒泡/捕获)
捕获为 true，冒泡为 false
element.addEventListener('click', function () {}, false)
新增了几个事件名，如 keyup
keyup
概念： 事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）
案例：
<!DOCTYPE html> <html> <head> <title>Event Demo</title> </head> <body> <div> Click Me </div> </body> </html>
若点击了 div 元素，那么 click 事件会按下列顺序传播
解析： click 事件首先在 div 元素上发生，然后沿着 dom 树向上传播，每一级节点上都会发生，直至传播到 document 对象，如图所示。
概念： 事件捕获的思想是不太具体的节点应该更早接收事件，而具体的元素应该最后接收事件。
若仍然以上面的代码作为案例，如果点击 div 元素，那么 click 事件会按下列顺序传播
解析： 在事件捕获的过程中，document 对象会首先接收到 click 事件，然后事件沿 dom 树一次往下，一直传播到事件的实际目标，即 div 元素。
代码示例
const dom = document.querySelector('#dom') /** * 事件捕获案例，冒泡反之即可 * 输出捕获顺序如下，即使监听时乱序 * 1. window * 2. document * 3. html * 4. body * 5. div */ // 监听 html document.documentElement.addEventListener('click', function () { console.log('捕获 html') }, true) // 监听 window window.addEventListener('click', function () { console.log('捕获 window') }, true) // 监听 body document.body.addEventListener('click', function () { console.log('捕获 body') }, true) // 监听 div dom.addEventListener('click', function () { console.log('捕获 div') }, true) // 监听 document document.addEventListener('click', function () { console.log('捕获 document') }, true)
DOM2 级事件规定的事件流包括三个阶段：
若捕获事件和冒泡事件都存在，首先发生的是捕获阶段，然后是目标阶段，最后才是冒泡阶段
addEventListener() 第三个参数为是否捕获：
IE8 及更早版本不支持 DOM 事件流
event || (event = window.event)
event.target || event.srcElement
event.preventDefault ? event.preventDefault() : (event.returnValue = false)
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)
// 创建事件 const event = new Event('custom') // 注册事件监听器 dom.addEventListener('custom', function () { console.log('触发了自定义事件') }) // 触发事件 dom.dispatchEvent(event)
The text was updated successfully, but these errors were encountered:
No branches or pull requests
DOM 事件
目录
基本概念（dom 事件的级别）
DOM0
各种浏览器都支持
DOM1（忽略）
未涉及事件级别的定义
DOM2
增加两个方法用于处理指定和删除事件处理程序的操作：
addEventListener(事件名, 回调函数, 冒泡/捕获)removeEventListener(事件名, 回调函数, 冒泡/捕获)捕获为 true，冒泡为 false
DOM3
新增了几个事件名，如
keyupdom 事件模型
事件冒泡
概念： 事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）
案例：
若点击了 div 元素，那么 click 事件会按下列顺序传播
解析： click 事件首先在 div 元素上发生，然后沿着 dom 树向上传播，每一级节点上都会发生，直至传播到 document 对象，如图所示。
事件捕获
概念： 事件捕获的思想是不太具体的节点应该更早接收事件，而具体的元素应该最后接收事件。
若仍然以上面的代码作为案例，如果点击 div 元素，那么 click 事件会按下列顺序传播
解析： 在事件捕获的过程中，document 对象会首先接收到 click 事件，然后事件沿 dom 树一次往下，一直传播到事件的实际目标，即 div 元素。
代码示例
拓展：JS 获取 DOM 元素的方法
dom 事件流
概念
DOM2 级事件规定的事件流包括三个阶段：
说明
若捕获事件和冒泡事件都存在，首先发生的是捕获阶段，然后是目标阶段，最后才是冒泡阶段
addEventListener() 第三个参数为是否捕获：
IE8 及更早版本不支持 DOM 事件流
图解
什么是 event 对象及常见应用
DOM 中的事件对象
IE 中的事件对象
Event 的兼容写法
event || (event = window.event)event.target || event.srcElementevent.preventDefault ? event.preventDefault() : (event.returnValue = false)event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true)自定义事件
The text was updated successfully, but these errors were encountered: