JavaScript中onclick事件this指向及代码失效问题咨询

一、inline onclick事件中this的准确指向 #

在HTML元素的onclick属性（也就是咱们常说的内联事件绑定）里，this确实严格指向触发该点击事件的DOM元素本身——也就是你点击的那个<h1>标签。第一个例子能正常工作，就是因为直接通过this操作当前点击的元素，没有任何歧义：

<!-- 正常生效 -->
<h1 onclick="this.innerHTML='Ooops!'">Click on this text!</h1>

二、为什么部分代码会失效？ #

咱们逐个拆解你贴出来的失效案例：

1. 调用myFunction()用querySelector("h1")的情况 #

<!-- 失效 -->
<h1 onclick="myFunction()">Click on this text!</h1>
<script>
function myFunction() {
  document.querySelector("h1").innerHTML = "Ooops!";
}
</script>

问题出在document.querySelector("h1")的特性上：它只会返回页面中第一个匹配<h1>选择器的元素。如果你的页面里有多个<h1>，当你点击后面的<h1>时，函数实际修改的是第一个<h1>的内容，当前点击的元素完全没变化，看起来就像代码失效了。

2. 直接在onclick里用querySelector("h1")的情况 #

不管是用转义双引号还是单引号的写法：

<!-- 失效 -->
<h1 onclick="document.querySelector(&quot;h1&quot;).innerHTML = 'Ooops!';">Click on this text!</h1>
<!-- 同样失效 -->
<h1 onclick="document.querySelector('h1').innerHTML = 'Ooops!';">Click on this text!</h1>

本质和上面的问题一致：querySelector("h1")永远只会抓取第一个<h1>，点击非第一个的元素时，修改的不是当前点击的那个，所以看起来没效果。

3. 为什么第二个例子（用getElementById）能生效？ #

<!-- 正常生效 -->
<h1 onclick="myFunctional()" id="demo">Click on this text!</h1>
<script>
function myFunctional() {
  document.getElementById("demo").innerHTML = "Ooops!";
}
</script>

因为HTML里的id是唯一标识，document.getElementById("demo")能精准定位到绑定了该id的<h1>，不会出现“找错元素”的问题，所以修改能正常生效。

三、通用的解决方法 #

如果想让函数能正确修改当前点击的元素，最好的方式是把this作为参数传递给函数：

<h1 onclick="myFunction(this)">Click on this text!</h1>
<script>
function myFunction(element) {
  // element就是当前点击的h1元素
  element.innerHTML = "Ooops!";
}
</script>

这种写法不管页面里有多少个<h1>，都能精准修改你点击的那个，不会出问题。

内容的提问来源于stack exchange，提问作者Fortunata