本文共 823 字，大约阅读时间需要 2 分钟。

几种DOM事件绑定方式下的this指向

1 通过在标签中指定

方法1：

<script>      function test() {           console.log(this);      }</script><button onclick="test()">点我</button>

结果指向window对象

方法2：将this传递给事件处理函数

<button onclick="test(this)">点我</button>// test中传递了一个实参，指定上下文对象为button节点，则在该函数中应该使用一个形参接收<script>      function test(context) {           console.log(context);          }</script>

结果指向button节点

方法3：直接将函数体写在标签中

<button onclick="console.log(this);">点我</button>

结果指向button节点

方法4：通过call,apply修改this指向

<button onclick="test.call(this)">点我</button><script>      function test() {           console.log(this);          }</script>

2 在脚本中绑定

均指向button节点

<button id="btn">点我</button>btn.onclick = function () {   	console.log(this);};btn.addEventListener("click", function () {   	console.log(this);});

3 总结

只有通过标签体直接指定时this会指向window对象，其余情况下this均会指向dom节点