事件捕获、事件冒泡、阻止冒泡、阻止默认行为、解绑事件，鼠标经过事
2023-10-17 本文已影响0人
Goorln
1. 事件捕获概念
从DOM的根元素开始去执行对应的事件 (从外到里)
- 事件捕获需要写对应代码才能看到效果
- 代码：
DOM.addEventListener(事件类型，事件处理函数，是否使用捕获机制)
-
说明
Ø addEventListener 第三个参数传入 true 代表是 捕获阶段 触发（很少使用）
Ø 若传入 false 代表 冒泡阶段 触发，默认就是false
Ø 若是用 L0 事件监听，则只有冒泡阶段，没有
<body>
祖父
<div class="father">
父亲
<div class="son">儿子</div>
</div>
<script>
const fa = document.querySelector(".father");
const son = document.querySelector(".son");
document.addEventListener("click", function () {
alert("我是祖父");
},true);
fa.addEventListener("click", function () {
alert("我是父亲");
},true);
son.addEventListener("click", function (e) {
alert("我是儿子");
},true);
</script>
</body>
事件捕获.gif
2. 事件冒泡概念
当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒
泡
-
简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件
-
事件冒泡是默认存在的
-
事件监听第三个参数是 false，或者默认都是冒泡
-
L2事件监听第三个参数是 false，或者默认都是冒泡
-
示例
<body>
祖父
<div class="father">
父亲
<div class="son">儿子</div>
</div>
<script>
const fa = document.querySelector(".father");
const son = document.querySelector(".son");
document.addEventListener("click", function () {
alert("我是祖父");
});
fa.addEventListener("click", function () {
alert("我是父亲");
});
son.addEventListener("click", function (e) {
alert("我是儿子");
});
</script>
</body>
事件冒泡.gif
3. 阻止冒泡
- 问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素
- 需求：若想把事件就限制在当前元素内，就需要阻止事件冒泡
- 前提：阻止事件冒泡需要拿到事件对象
- 语法
事件对象.stopPropagation()
<body>
祖父
<div class="father">
父亲
<div class="son">儿子</div>
</div>
<script>
const fa = document.querySelector(".father");
const son = document.querySelector(".son");
document.addEventListener("click", function () {
alert("我是祖父");
});
fa.addEventListener("click", function () {
alert("我是父亲");
});
son.addEventListener("click", function (e) {
alert("我是儿子");
// 阻止流动传播 事件对象.stopPropagation()
e.stopPropagation();
});
</script>
阻止冒泡.gif
- 注意：此方法可以阻断事件流动传播，不光在冒泡阶段有效，捕获阶段也有效
4. 阻止默认行为
我们某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转
- 语法
e.prevenDefault()
- 示例：
<body>
<form action="http://www.itcast.cn">
<input type="submit" value="免费注册">
</form>
<a href="http://www.baidu.com">百度一下</a>
<script>
const form = document.querySelector('form')
form.addEventListener('submit', function (e) {
// 阻止默认行为 提交
e.preventDefault()
})
const a = document.querySelector('a')
a.addEventListener('click', function (e) {
e.preventDefault()
})
</script>
</body>
阻止默认行为.gif
5. 解绑事件
on事件方式，直接使用null覆盖偶就可以实现事件的解绑
- 语法：
btn.onclick = function () {
alert('点击了')
// L0 事件移除解绑
btn.onclick = null
}
addEventListener方式，必须使用：
removeEventListener(事件类型, 事件处理函数, [获取捕获或者冒泡阶段])
例如：
function fn() {
alert('点击了')
}
btn.addEventListener('click', fn)
// L2 事件移除解绑
btn.removeEventListener('click', fn)
注意：匿名函数无法被解绑
鼠标经过事件的区别
- 鼠标经过事件：
<body>
<div class="father">
<div class="son"></div>
</div>
<script>
const father = document.querySelector(".father");
const son = document.querySelector(".son");
father.addEventListener("mouseenter", function () {
console.log("鼠标经过");
});
father.addEventListener("mouseleave", function () {
console.log("鼠标离开");
});
</script>
</body>
Ø mouseover 和 mouseout 会有冒泡效果
mouseover 和 mouseout.gif
Ø mouseenter 和 mouseleave 没有冒泡效果（推荐使用这两种）
mouseenter 和 mouseleave.gif
两种注册事件的区别
-
传统on注册（L0）
Ø 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
Ø 直接使用null覆盖偶就可以实现事件的解绑
Ø 都是冒泡阶段执行的 -
事件监听注册（L2）
Ø 语法: addEventListener(事件类型, 事件处理函数, 是否使用捕获)
Ø 后面注册的事件不会覆盖前面注册的事件(同一个事件)
Ø 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
Ø 必须使用removeEventListener(事件类型, 事件处理函数, 获取捕获或者冒泡阶段)
Ø 匿名函数无法被解
