this 指向总结1 dom 事件绑定中的this

this1 事件绑定中的 this 指向谁

传统绑定1 在标签后面进行事件绑定

1. html 代码:

   <button id="btn" onclick="test()">按钮</button>
   

   js 代码

   function test() {
         
         
      console.log(this)
   }
   

   点击 按钮后 打印结果为 window 对象
2. html 代码

   <button id="btn" onclick="test(this)">按钮</button>
   

   js 代码

   function test() {
         
         
      console.log(this)
   }
   

   点击 按钮后 打印结果为 button dom节点

其他传统绑定

//1. 有名函数绑定
document.getElementById('btn').onclick=test
function test() {
    
    
   console.log(this)
}
//2.匿名函数绑定
document.getElementById('btn').onclick=function() {
    
    
	console.log(this)//或者 test()
}

点击 按钮后 打印结果为 button dom节点

现代绑定

//1. 有名函数绑定
document.getElementById('btn').addEventListener('click',test,false)
function test() {
    
    
   console.log(this)
}
//2.匿名函数绑定
document.getElementById('btn').addEventListener('click',function(){
    
    
	console.log(this)//或者 test()
},false)

点击 按钮后 打印结果为 button dom节点

总结:在事件绑定中,只要是通过 dom 节点来绑定事件,则 this 都指向该 dom 节点

如果是在标签里面绑定事件 没有在方法里面传递 this 时,则函数里面的 this 指向 window ,如果传递了 this ,则 this 指向该 dom 节点