JavaScript事件冒泡和事件捕获

概念

  事件冒泡和事件捕获是为了解决页面中事件发生的顺序(事件流)问题提出的。两者的顺序完全倒置。事件冒泡是微软提出的。认为发生顺序是从内到外(如泡泡从底网上泡)。而事件捕获是网景提出的,认为发生顺序是从外到内。
如下代码:


<html>
<head>
	<title>testtitle>
head>
<body>
	<div id="div1">
		<span id="span1">点击除非事件span>
	div>
body>
html>
1. 事件冒泡(event bubbling)

如果点击了span,那么事件冒泡的顺序就会从最内层的元素开始发生,一直向上传播,直到document对象。所以click事件的顺序是 span -> div -> body -> html - > document

2. 事件捕获(event capturing)

和事件冒泡相反,点击事件顺序为 document -> html -> body -> div -> span


element.addEventListener(event, function, useCapture)

W3C的统一标准方法,该方法用于向指定元素添加事件句柄。

如上的代码获取span元素为其添加点击事件句柄

var span = document.getElementById('span1');
var div = document.getElementById('div1');

span.addEventListener("click", function(e) {
	console.log("span事件冒泡");		
}, false);

// 第二个参数function调用只填方法名。
div.addEventListener("click", print, false);

function print() {
	console.log("div事件冒泡");
}

点击span的标签的时候,控制台打印。如果第三个参数都改为true,使用捕获,顺序相反。

span事件冒泡
div事件冒泡
参数 描述
event 必须。字符串,指定事件名。
注意: 不要使用 “on” 前缀。 例如,使用 “click” ,而不是使用 “onclick”。
function 必须。指定要事件触发时执行的函数。
当事件对象会作为第一个参数传入函数。 事件对象的类型取决于特定的事件。
例如, “click” 事件属于 MouseEvent(鼠标事件) 对象。
useCapture 可选。布尔值,指定事件是否在捕获或冒泡阶段执行。
true - 事件句柄在捕获阶段执行
false(默认)。事件句柄在冒泡阶段执行

注意

当两者共存的时候,先注册先行。
此外两者并没什么优劣之分。但是事件冒泡的事件流模型被所有主流的浏览器兼容,使用事件相对更好。

你可能感兴趣的:(前端开发)