注册事件 / 绑定事件
传统注册方式：
<button onclick=""></button>
btn.onclick = function() {}
特点：注册事件的唯一性
方法监听注册方式：
addEventLisener()
特点：同个元素可以注册多个监听器（注意，非标准也可以使用：attachEvent()）
例如：
btn.addEventListener('click', function() {
alert(1);
})
删除事件/解绑事件
传统注册方式：
btn.onclick = null
方法监听注册方式：
removeEventLisener() detachEvent()
DOM 事件流
例如，我们给 div 添加了点击事件：
document —> html —> body —> div // 捕获阶段 div —> body —> html —> document // 冒泡阶段
div 被点击，那么父元素、body、html 均会被点击，会依次查找是否绑定了事件
我们可以验证，通过给父元素和子元素都添加点击事件，观察触发事件的顺序（注意，addEventListener 的第三个参数为 true ，代表处于捕获阶段，否则处于冒泡阶段）
我们更关注事件冒泡，并且有些事情是没有冒泡的，例如：onblur、onfocus、onmouseenter、onmouseleave
事件对象
如果在侦听函数中放入 event 参数（可以自己命名），那么它代表此事件对象，例如：
div.addEventListener('click', function(event) {
console.log(event)
})
类似于 python 中类的 self 参数
事件对象的常见属性和方法
例如：e.target，返回触发事件的对象，这个和 this 是有区别的。e 一般可以理解为点击到的对象
e.type e.preventDefault() e.stopPropagation()
事件委托
例如，我们有一个 ul ，我们想要点击每个 li 的时候均弹出对话框，那么只需要给 ul 设置监听器即可，因为 li 没有绑定监听器，会冒泡到 ul 上
常用的鼠标事件
例如，禁止复制文字：
<body>
不可复制的文字
<script>
document.addEventListener('contextmenu', function(e) {
e.preventDefault()
})
</script>
</body>
selectstart 可以阻止选中
鼠标事件对象
<body>
<script>
document.addEventListener('click', function(e) {
console.log(e)
})
</script>
</body>
e.clientX/Y 返回鼠标相对于浏览器窗口可视化区的坐标
e.pageX/Y 返回鼠标相对于文档页面的坐标
e.screenX/Y 返回鼠标相对于电脑屏幕的坐标
常用的键盘事件
例如：
<body>
<script>
document.addEventListener('keyup', function(e) {
console.log('键盘弹起了')
})
</script>
</body>
keyup keydown keypress
我们可以知道用户按下了哪个键，通过查看事件的属性
标签：function,教程,DOM,事件,addEventListener,div,document,高阶,冒泡 From： https://www.cnblogs.com/daxiangcai/p/16912805.html