事件绑定与事件捕获/冒泡

来源：互联网发布：java泛型编辑：程序博客网时间：2024/06/03 21:01

element.addEventListener(event, function, useCapture)
参数 event 必须。字符串，指定事件名。
（注意: 不要使用 "on" 前缀。例如，使用 "click" ,而不是使用 "onclick"。）

参数 function 必须。指定要事件触发时执行的函数。

当事件对象会作为第一个参数传入函数。事件对象的类型取决于特定的事件。例如， "click" 事件属于 MouseEvent(鼠标事件) 对象。

参数 useCapture 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
可能值:
true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行

1.关于事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确（从外到里）
2.关于事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发（从里到外）
3.DOM事件流：同时支持两种事件模型：捕获型事件和冒泡型事件，但是，捕获型事件先发生。两种事件流会触及DOM中的所有对象，从document对象开始，也在document对象结束。

W3C模型是将两者进行中和，在W3C模型中，任何事件发生时，先从顶层开始进行事件捕获，直到事件触发到达了事件源元素。然后，再从事件源往上进行事件冒泡，直到到达document；
IE只支持事件冒泡，不支持捕获；不支持addEventListener但是提供了一个函数attachEvent，不过这个函数没有第三个参数，且第一个参数带“on"；

事件的传播是可以阻止的：
• 在W3c中，使用stopPropagation（）方法
• 在IE下设置cancelBubble = true；
在捕获的过程中stopPropagation（）；后，后面的冒泡过程也不会发生了~
3.阻止事件的默认行为，例如click <a>后的跳转~
• 在W3c中，使用preventDefault（）方法；
• 在IE下设置window.event.returnValue = false;
4.不是所有的事件都能冒泡，例如：blur、focus、load、unload，

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<div id="parent">
<div id="child">
<button type="button">click</button>
</div>
</div>
<body>
<script>
var parent=document.getElementById("parent");
var child=document.getElementById("child");
parent.addEventListener("click",function(){
console.log("捕获到parent");
},true);
child.addEventListener("click",function(){
console.log("捕获到child");
},true);
parent.addEventListener("click",function(){
console.log("冒泡到parent");
},false);
child.addEventListener("click",function(){
console.log("冒泡到child");
},false);
</script>
</body>
</html>

结果：

//捕获到parent

//捕获到child

//冒泡到child

//冒泡到parent

阅读全文

0 0