什么是 DOM 事件
- DOM 事件是浏览器的一个功能，是浏览器或者用户针对页面做出的某些动作，比如点击，鼠标移动，键盘输入等。
- DOM 事件是用户与页面进行交互的核心，当事件触发时，可以绑定一个或多个事件处理函数，来完成我们要实现的功能。
DOM 事件模型
DOM 事件模型分类两种，事件冒泡和事件捕获。当某一事件触发时，先执行捕获再执行冒泡。
事件冒泡
当子元素的事件类型触发时，所有父元素上绑定同类型事件均会从内到外层层触发。
代码示例
<body>
<div class="grandparent">
祖父元素
<div class="parent">
父元素
<div class="children">子元素</div>
</div>
</div>
<script>
let children = document.querySelector('.children')
let parent = document.querySelector('.parent')
let grandparent = document.querySelector('.grandparent')
// 这里的绑定的三个事件类型相同，均为 click，如果不相同则不会执行事件冒泡
children.addEventListener('click', () => {
console.log ('子元素被点击了')
})
parent.addEventListener('click', () => {
console.log ('父元素被点击了')
})
grandparent.addEventListener('click', () => {
console.log ('祖父元素被点击了')
})
</script>
</body>
当点击子元素时，控制台打印如下结果
事件捕获
当子元素的事件类型触发时，所有父元素上绑定的同类型事件均会从外到内层层触发。
代码示例
<body>
<div class="grandparent">
祖父元素
<div class="parent">
父元素
<div class="children">子元素</div>
</div>
</div>
<script>
let children = document.querySelector('.children')
let parent = document.querySelector('.parent')
let grandparent = document.querySelector('.grandparent')
children.addEventListener('click', () => {
console.log ('子元素被点击了')
}, true)
parent.addEventListener('click', () => {
console.log ('父元素被点击了')
}, true)
grandparent.addEventListener('click', () => {
console.log ('祖父元素被点击了')
}, true)
</script>
</body>
当点击子元素时，控制台打印如下结果
事件对象
每当事件触发时，浏览器会把当前事件触发的详情信息记录下来，并把它们封装成一个对象，可以传递给事件处理函数。
children.addEventListener('click', (e) => {
console.log ('子元素被点击了')
console.log(e)
}, true) // e 为事件对象
e.target 和 e.currentTarget 的区别
e.target 用户操作的元素
e.currentTarget 程序员监听的元素
代码示例
children.addEventListener('click', (e) => {
console.log('子元素被点击了')
console.log(e.target) // 输出子元素
console.log(e.currentTarget); // 输出子元素
})
parent.addEventListener('click', (e) => {
console.log('父元素被点击了')
console.log(e.target) // 输出子元素或父元素
console.log(e.currentTarget) // 输出父元素
})
console.log(e) // 报错 Uncaught ReferenceError: e is not defined
当点击子元素时，控制台打印出如下结果
两个点击事件的 e.target 值都是用户点击子元素，而 e.currentTarget 则是事件触发的元素，用户点击触发的元素 e.target 和 e.currentTarget 的值是相同的，通过事件冒泡和事件捕获触发的元素，e.target 和 e.currentTarget 的值是不相同的。
当事件结束后，事件对象 e 就不存在。
阻止事件冒泡和事件捕获
通过 e.stopPropagation() 可以阻止事件冒泡和事件捕获
阻止事件冒泡
代码示例
children.addEventListener('click', (e) => {
console.log('子元素被点击了')
})
parent.addEventListener('click', (e) => {
console.log('父元素被点击了')
e.stopPropagation() // 当代码执行到这里时，停止事件传播
})
grandparent.addEventListener('click', (e) => {
console.log('祖父元素被点击了') // 这里不会打印出来
})
阻止事件捕获
- 子元素不能阻止父元素的事件捕获
代码示例
children.addEventListener('click', (e) => {
console.log('子元素被点击了') // 这里不会打印出来
})
parent.addEventListener('click', (e) => {
console.log('父元素被点击了')
e.stopPropagation() // 当代码执行到这里时，停止事件传播
})
grandparent.addEventListener('click', (e) => {
console.log('祖父元素被点击了')
})
取消默认事件
e.preventDefault() // w3c 的写法
e.returnValue = false // IE 的写法
- 元素有默认事件才可以取消，如果元素本身没有默认事件或者元素不支持取消默认事件（如滚动条），则调用无效。
- 不可取消冒泡和不可取消默认事件的元素可以通过 MDN 英文版搜索 元素 event ，看到 Bubbles (冒泡) 和（Cancelable）是否支持。
什么元素有默认事件
<a> 链接
<inpunt type='submit'> 表单提交按钮
οncοntextmenu 右键菜单
onmousewheel 鼠标滚轮
touchstart 触屏滑动
代码示例
<body>
<a href="https://www.baidu.com">百度</a>
<script>
a.onclick = (e) => {
if (e.preventDefault) {
e.preventDefault()
console.log('链接跳转被阻止了')
} else {
window.event.returnValue = false
console.log('链接跳转被阻止了')
}
}
</script>
</body>
网友评论