JavaScript事件流
事件传播的三阶段
- 捕获阶段: 事件对象从window到目标父节点传播的阶段。
- 目标阶段: 事件对象到达目标。如果事件类型指定不冒泡，则事件对象将在此阶段完成后停止。
- 冒泡阶段: 事件流对象从目标父节点到达window传播的阶段。
注册事件
通常使用addEventListener注册事件，该函数的第三个参数可以是布尔值，也可以是对象，默认值为false，决定了注册的事件是捕获事件（true）还是冒泡事件。 一般来说，如果我们只希望事件只触发在目标上，这时候可以使用
target 和 currentTarget
target是触发事件的某个具体的对象，只会出现在事件机制的目标阶段，即"谁触发了事件，谁就是target"。 currentTarget是绑定了当前事件类型的对象，有可能是目标节点的祖先节点。
取消默认行为
w3c的方法是e.preventDefault()，早期版本的IE浏览器使用e.returnValue = false。
/**
* 兼容的取消事件默认行为
*/
function cancelHandler(event) {
var event = event || window.event; //用于IE
if(event.preventDefault){
event.preventDefault(); //标准技术
}
if(event.returnValue){
event.returnValue = false; //IE
}
}
阻止事件在冒泡阶段传播
<!-- 例子结构 -->
<div id="outer">
<p id="inner"></p>
</div>event.stopPropagation阻止事件在冒泡阶段传播。
/**
* 点击#inner之后会发生如下过程:
* outer捕获阶段
* inner 一
* inner 二
* inner 三
*/
const inner = document.querySelector('#inner');
const outer = document.querySelector('#outer');
inner.addEventListener("click", event => {
console.log("inner 一");
}, false);
inner.addEventListener("click", event => {
console.log("inner 二");
event.stopPropagation();
}, false);
inner.addEventListener("click",event => {
console.log("inner 三");
}, false);
outer.addEventListener("click", event => {
console.log("outer捕获阶段");
}, false);
outer.addEventListener("click", event => {
console.log("outer冒泡阶段");
}, false);
如果有多个相同类型事件的事件监听函数绑定到同一个元素，当该类型的事件触发时，它们会按照被添加的顺序执行。如果其中某个监听函数执行了event.stopImmediatePropagation()方法，则当前元素剩下的监听函数将不会被执行，并且阻止事件在冒泡阶段传播。
/**
* 点击#inner之后会发生如下过程:
* outer捕获阶段
* inner 一
* inner 二
*/
const inner = document.querySelector('#inner');
const outer = document.querySelector('#outer');
inner.addEventListener("click", (event) => {
console.log("inner 一");
}, false);
inner.addEventListener("click", (event) => {
console.log("inner 二");
event.stopImmediatePropagation();
}, false);
inner.addEventListener("click",(event) => {
console.log("inner 三");
}, false);
outer.addEventListener("click", event => {
console.log("outer捕获阶段");
}, false);
outer.addEventListener("click", event => {
console.log("outer冒泡阶段");
}, false);网站声明：如果转载，请联系本站管理员。否则一切后果自行承担。
相关文章
-
javascript事件
2023-12-26
66328 浏览
1.事件基础事件是由三部分组成：事件源事件监听事件处理程序代码样例：
-
[网页编程]-10 javascript event事件
2023-12-27
65610 浏览
满足某些条件就会被触发例如单击常用操作:单击事件:onclick最常用双击事件:ondblclick获得焦点事件:onfocus失去焦点事件:onblur鼠标移动事件:onmousemove鼠标离开事件:onmouseout鼠标抬起事件:onmouseover键盘抬起事件:onkeyup页面加载事件:onload要一个操作触发多个事件只需要在事件中以分号隔开即可
-
javascript 添加包含事件的元素的方法
2023-12-26
63108 浏览
<em class="color_r">javascript</em>鼠标<em class="color_r">事件</em>偏移量的研究 -
关注我们
扫一扫关注公众号
添加我为好友，拉您入交流群！
添加我为好友，拉您入交流群！
请使用微信扫一扫!
-