javascript运行机制之this详细介绍(2)


//页面Element上进行绑定 
  <script type="text/javascript"> 
     function btClick(){ 
        console.log(this);  //控制台输出: Window  //this指向的是全局对象--window对象 
    } 
  </script> 
  <body> 
    <button >点击</button> 
  </body> 

复制代码 代码如下:


//js中绑定方式(1) 
  <body> 
    <button>点击</button> 
  </body> 
  <script type="text/javascript"> 
     function btClick(){ 
        console.log(this);  //控制台输出:<button>点击</button>  //this指向的是Element按钮对象 
     } 

     document.getElementById("btn").onclick = btClick; 
     document.getElementById("btn").onclick;   
  </script> 

复制代码 代码如下:


//js中绑定方式(2) 
<body> 
   <button>点击</button> 
 </body> 
 <script type="text/javascript"> 
    document.getElementById("btn").onclick = function(){ 
     console.log(this);  //控制台输出:<button>点击</button>  //this指向的是Element按钮对象 
    } 
    document.getElementById("btn").onclick; 
 </script> 

复制代码 代码如下:


//js中绑定方式(3) 
<body> 
   <button>点击</button> 
 </body> 
 <script type="text/javascript"> 
    function btClick(){ 
        console.log(this);   
     } 

    document.getElementById("btn").addEventListener('click',btClick); //控制台输出:<button>点击</button>  //this指向的是Element按钮对象把函数(方法)用在事件处理的时候。 
    document.getElementById("btn").attachEvent('onclick',btClick);  //IE使用,控制台输出: Window  //this指向的是全局对象--window对象 
 </script> 

运行结果分析:以上2种常用事件绑定方法,在页面Element上的进行事件绑定(onclick="btClick();"),this指向的是全局对象;而在js中进行绑定,除了attachEvent绑定的事件方法外,this指向的是绑定事件的Elment元素。

您可能感兴趣的文章:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wdyxpp.html