Question

<!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

当我点击div a时，在控制台中显示：

A is clicked
Document is clicked

我认为结果应该是

点击了
点击B

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

Answer 1

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

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

Answer 2

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

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

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

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

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

Answer 3

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

B is clicked

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

在js中冒泡冒泡的问题

3 个答案: