您的位置：首页 > Web前端 > JavaScript

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

2012-08-26 15:47 232 查看

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

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

<body style="background-color:black;" scroll="no">

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航