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() {console.log("B is clicked");} 
document.onclick = function() {console.log("Document is clicked");} 
</script>
</body>
</html>

问题：

对于上面的代码，它注册了3个点击事件处理程序，它们也是对象，对吧？如果是这样，我如何在控制台中检查这3个处理程序/对象的属性，方法？

Answer 1

当你这样做时

document.getElementById("a").onclick = function() {console.log("A is clicked");}

您只是为该锚点onclick属性分配一个函数，然后当单击该锚点时，浏览器将触发该函数。如果你想阅读这个函数是什么，你只需要输出

console.log(document.getElementById("a").onclick);

Answer 2

我真的不确定你要做什么，也许这可以帮助你：

document.getElementById("a").onclick = function(event) {
    console.log("A is clicked");
    console.log(this); //refers to the source element object
    console.log(event); //refers to the event object
}

如何在js中检查事件处理程序的属性？

2 个答案: