主页 / 问题 / 837137
Accepted
Виталик Черный
Asked:2020-06-04 00:37:09 +0000 UTC2020-06-04 00:37:09 +0000 UTC

调用第二个事件的原因是什么？

  • 772

function listner(e) {
	console.log("header");
	document.addEventListener("click", function f() {
		console.log("document");
	});
}

document.getElementsByTagName("header")[0].addEventListener("click", listner);
.header {
  height: 200px;
  background: #142;
}
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8" />
	<title>html-ready</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
</head>
<body class="page">
	<header class="header">
	</header>
</body>
</html>

javascript

2 个回答

  1. 因为在事件处理程序中添加了事件处理click程序click并冒泡了click.

    单击鼠标几次，您将看到输出“文档”的处理程序数量增加。

    • 2
  2. Best Answer

    该方法.addEventListener可以带一个参数useCapture。默认情况下，此参数等于false，因此处理程序将在事件的冒泡阶段触发。

    在此阶段，事件从目标元素冒泡到顶级容器，即document.

    如果我们回到代码：

    在处理目标元素上的事件时，将处理程序添加到容器中，由于useCapture未指定参数，因此处理程序被添加到冒泡阶段，该阶段正在进行中，因此，处理程序执行后目标元素并在容器中浮动，这是文档上新添加的处理程序。

    您可以将内部处理程序添加到捕获阶段，在这种情况下，它将仅在下一次单击时执行：

    function listner(e) {
  console.log("header");
  document.addEventListener("click", function f(e) {
    console.log("document");
    e.stopPropagation();
  }, true);
}

document.getElementsByTagName("header")[0].addEventListener("click", listner);
    .header {
  height: 200px;
  background: #142;
}
    <header class="header">
</header>

    • 1

相关问题