JavaScript事件对象和冒泡捕获
2018-11-13 本文已影响0人
AuglyXu
事件对象
- 当注册的事件被触发的时候, 系统就会自动创建一个事件对象, 并且返回给我们
事件对象就是一个系统自动创建的对象 - 注意点:
- 在高级版本的浏览器中, 会自动将事件对象传递给回到函数
- 在低级版本的浏览器中, 不会自动将事件对象传递给回调函数
- 在低级版本的浏览器中, 需要通过window.event来获取事件对象
var oA = document.querySelector("a");
oA.onclick = function (event) {
alert("a标签被点击了");
// 禁用默认行为
// 企业开发推荐
// return false;
event = event || window.event;
// 禁用默认行为
// 注意点: 高级版本浏览器支持
event.preventDefault();
event.returnValue = false; // 老版本IE
}
事件对象的作用
-
事件三个阶段
- 捕获阶段(从外向内)
- 当前目标阶段
- 冒泡阶段(从内向外)
-
注意点:
- 事件三个阶段只会同时出现两个
- 要么捕获和当前, 要么当前和冒泡
-
为什么要么只能是捕获和当前, 要么只能是当前和冒泡?
这是JS处理事件的历史问题: 网景公司 / IE -
事件对象中eventPhase属性的作用:
获取当前事件的阶段
设置事件是捕获还是冒泡
- 使用addEventListener
- addEventListener的第三个参数表示捕获还是冒泡
- 注意点:
- 只有addEventListener可以设置
- onXXX和attachEvent事件不能设置,默认就是冒泡
阻止事件的冒泡
- 高版本: event.stopPropagation();
- 低版本: event.cancelBubble = true;
事件冒泡的作用
- 用作事件的委托
- 事件对象的target属性可以获取到真正触发事件的那个元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>113-事件冒泡的作用</title>
<style>
*{
margin: 0;
padding: 0;
}
.selected{
background: red;
}
</style>
</head>
<body>
<ul>
<li class="selected item1">我是第1个li</li>
<li class="item2">我是第2个li</li>
<li class="item3">我是第3个li</li>
<li class="item4">我是第4个li</li>
<li class="item5">我是第5个li</li>
</ul>
<script>
var oUl = document.querySelector("ul");
var currentItem = oUl.children[0];
oUl.onclick = function (event) {
// console.log("ul被点击了");
// 如何获取当前触发事件的真实元素
event = event || window.event;
// 可以通过事件对象的target属性获取到真正触发事件的那个元素
// console.log(event.target);
currentItem.className = "";
event.target.className = "selected";
currentItem = event.target;
}
</script>
</body>
</html>
移入和移出的区别
-
onmouseover和onmouseenter的区别
onmouseover会触发事件的冒泡
onmouseenter不会触发事件的冒泡 -
onmouseout和onmouseleave
onmouseout会触发事件的冒泡
onmouseleave不会触发事件的冒泡
事件对象的属性
pageX和pageY
- pageX和pageY可以获取到当前鼠标的位置
target
- target可以获取到实际触发事件的对象
preventDefault
- preventDefault()可以禁止默认行为
eventPhase
- eventPhase可以获取当前事件的阶段
…………………………还有很多
