2 
<!DOCTYPE HTML>
<html>
<body>
<style type="text/css">
#a {background-color:blue;width:100px;height:200px;}
#b {background-color:red;margin-left:25px;width:50px;height:100px;}
</style> 
<div id="a">a
    <div id="b">b</div> 
</div>
<script>
document.getElementById("a").onclick = function() {console.log("A is clicked");} 
document.getElementById("b").onclick = function(event) {console.log("B is clicked");event.stopPropagation();} 
document.onclick = function() {console.log("Document is clicked");} 
</script>
</body>
</html>

问题：

1. function(event)，event是形参，什么是实参？实际参数是如何传递给事件的？因为通常我们使用以下样式的参数：

function method(int num){ //num is the formal
/*implementation*/
}

//in main
method(42); //42 is the actual
  1. 当我在控制台中单击 div a 时，它显示：
A is clicked
Document is clicked

我认为结果应该是

A被点击
B被点击

这是我的想法：当单击 div a 时，document.getElementById("a").onclick被执行，然后document.getElementById("b").onclick被执行，因为我们有event.stopPropagation();它会在 div b 中停止，并且不会执行document.onclick，但它似乎不是这样工作的，谁能帮我理解这里发生了什么？

4

3 回答 3

0

是event浏览器事件。您无法真正更改它，但您可以使用闭包或使用数据属性将更多数据传递给您的事件处理程序。您在单击 A 时得到了正确的结果。事件向上冒泡直到到达文档的根元素。如果你停止传播，你可以防止它向上冒泡到它的父元素。如果你点击b然后它会向上冒泡到a然后到body. 但是你停止传播b所以唯一的输出应该是

B is clicked

每个浏览器中的event对象本身都是不同的，尽管有一个建议。某些浏览器不支持stopPropagationandpreventDefault方法或其他属性（例如，较旧的 IE 不完全支持 DOM Level 2 规范）。

于 2013-06-27T09:57:39.693 回答
0

事件传播意味着将事件冒泡到祖先链中，直到文档对象。

因此，在您的情况下，附加到元素 a 和文档的事件都会被触发。当您单击元素 b 时，将触发仅附加到元素 b 的事件，因为从该点开始阻止传播。

于 2013-06-27T09:48:41.073 回答
0

function(event)，event是形参，什么是实参？

实际参数是一个事件对象，由浏览器创建。对于点击事件，它将是MouseEvent.

当我点击 div a... 我认为结果应该是...

您单击了 的父级b。该事件从目标向上传播DOM 树，因此它永远不会触及b. 传播阶段将从 开始a，并向上移动通过每个父级，直到到达文档。

如果您单击b，该stopPropagation方法将阻止事件冒泡，并且您只会在输出中看到“B 被单击”。

于 2013-06-27T09:48:53.840 回答