DOM事件中this的指向问题

几种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节点