HTML中定义的事件和JS中事件绑定的区别

来源：互联网发布：b站雪河炮太捏脸数据编辑：程序博客网时间：2024/06/07 05:09

JavaScript中的函数运行在词法作用域中，这也意味着函数在定义它们的作用域中运行，而不在调用它们的作用域中运行。

下面的代码，在控制台中将打印出什么？

<a id="a1" href="javascript:;" onclick="console.log(this);">a1</a><br>
<a id="a2" href="javascript:;">a2</a><br>
<a id="a3" href="javascript:;" onclick="dosome()">a3</a>
</body>
<script>
function dosome(){
console.log(this);
}
document.getElementById("a2").addEventListener("click",function(e){
console.log(this);
},false);

</script>

控制台内容：

a1:<a id="a1" href="javascript:;" onclick="console.log(this);">a1</a>

a2:<a id="a2" href="javascript:;">a2</a>

a3:DOMWindow

a1的显示内容，this就是a1本身。这时，onclick函数在定义DOM树中。HTML元素中绑定的事件句柄，它的作用域链头是调用对象，作用域链的下一个对象是触发事件句柄的对象。

a2的显示内容，this也是a2本身。大部分浏览器的addEventListener实现中this都是引用注册的对象(相当于e.currentTarget)，但是onclick函数却在JS的全局作用域中。

a3的显示内容，this是JS作用域的全局变量window对象。因为a3触发的函数是定义在JS作用域中的。

a1和a2，在上面的例子中似乎并不明显有区别，我们将例子稍稍转变一下(this 改为body)，区别就出来了。

<body style="background-color:black;" scroll="no">
<a id="a1" href="javascript:;" onclick="console.log(body);">a1</a><br>
<a id="a2" href="javascript:;">a2</a><br>
<a id="a3" href="javascript:;" onclick="dosome()">a3</a>
</body>
<script>
var body="g_body";
function dosome(){
console.log(body);
}
document.getElementById("a2").addEventListener("click",function(e){
console.log(body);
},false);
</script>

控制台内容：

a1:DOM中的body元素。

a2:g_body.

a3:g_body.

a1，在作用域链查找时，当前的<a>标签中，没有找到body定义，就会找它作用域链的上一级，在DOM树中查找body，找到了<body>。

a2，在作用域链查找时，当前的<a>标签中，没有找到body定义，找作用域链的上一级，在window对象中查找body，找到了body变量g_body.

a3，在作用域链查找时，当前函数中没有定义body变量，找作用域上一级，在window对象中找到了body变量g_body.