javascript:void(0)与onclick

最新推荐文章于 2024-07-02 09:26:15 发布

jack_liu4Ye

最新推荐文章于 2024-07-02 09:26:15 发布

阅读量5.7k

点赞数

文章标签： javascript function blog url

本文探讨了JavaScript中通过不同方式设置链接点击事件时this关键字的行为差异。解释了为什么在使用href属性与javascript:前缀时，this指向全局而非期望的元素，而在使用onclick属性时，this则正确指向触发事件的元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在blog的后台管理中允许为一个分类添加一个地址，但是不好添加onclick事件。想传递当前对象给一个函数，于是就将这个URL写成"Javascript:shoControlSidebar(this)"，可是结果发现这并不可行，传递过去的参数是一个对象，但是却得不到任何其他信息。我想得到的是innerText，而这个this并非指向它所在的A标签。

这是<a href="Javascript:shoControlSidebar(this)">和<a href="javascript:void(0)" onclick="shoControlSidebar(this)">不同的地方。

当使用onclick="shoControlSidebar(this)"的时候，解释器会给他包装一个匿名函数，变成了：
  a.onclick = function anonymous()
  {
        shoControlSidebar(this);
  }
这个this指的就是a这个对象，而使用href的方式时，由于是一个地址，这个this就无处可指了。

出问题的代码：
<a href="javascript:alert(this.nodeName);">怎么这个this返回的不对呀?</a>

修改后这样:
<a href="javascript:void(0);" onclick="alert(this.nodeName);">这下这个this对了?</a>

其实onclick 后面的语句被解释为function，所以this代表调用该函数的对象，可以用下面代码来验证
<a href="javascript:void(0);" onclick="alert(typeof this.onclick);">onclick是函数</a>

总结:既然 onclick定义的是一个函数，并且是调用元素的一个方法，this就代表该元素。
如果是写在 href="javascript:" 里的代码，他的作用域是全局的，所以写this，它不知道到底是那个元素