JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

JS中的THIS和WINDOW.EVENT.SRCELEMENT詳解_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:57 PM

this

我們先來看一個簡單的例子：

複製程式碼程式碼如下:

完全沒有問題。

那麼什麼情況下不可以用？

fuction method()
{
  alert(this.value);
}
<input type="text" onblur="method()"/>

登入後複製

這個就不可以，因為method()是被回應函數呼叫的函數。

那麼這種情況下怎麼辦？

方法一:

fuction method(btn)
{
  alert(btn.value);
}
<input type="text" onblur="method(this)"/>

登入後複製

沒問題！

方法二：

fuction method()
{
  alert(window.event.srcElement.value);
}
<input type="text" onblur="method()"/>

登入後複製

沒問題！ window.event.srcElement取得觸發事件的控制項

我們在看一個稍微繞一點的例子

<head>
  <script type="text/javascript">
    function InitEvent() {
      var inputs = document.getElementsByTagName_r("input");
      for (var i = 0; i < inputs.length; i++) {
        inputs[i].onblur = OnblurEvent;
      }
    }
    function OnblurEvent() {
      // OnblurEvent是onblur的响应函数，而不是被响应函数调用的函数
      // 所以可以用this来获取发生事件的对象
      if (this.value.length > 0) {
        this.style.backgroundColor = "white";
      }
      else {
        this.style.backgroundColor = "red";
      }
    }
  </script>
</head>
<body onload="InitEvent()">
  <input id="Text1" type="text" />
  <input id="Text2" type="text" />
  <input id="Text3" type="text" />
</body>
</html>

登入後複製

我們再來看看2者之間的差異與連結

this：

下面先看一個例子：

 <html>
 <title>this与srcElement的区别</title>
 <head>
 <script type="text/javascipt>"
 function btnClick(){
  alert(this.value);
 }
 </script>
 </head>
 <body>
 <input type="button" value="单击" onclick="btnClick()"/>
 </body>
 </html>

登入後複製

此時彈出的答案為“undefined”，說明在呼叫函數時不能使用this.屬性來取得。再看下一個例子：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
   <title>无标题页</title>
   <script type="text/javascript">
   function btnClick(btn){
    alert(btn.value);
   }
   </script>
 </head>
 <body>
 <input type="button" onclick="btnClick(this)" value="单击" />
 
 </body>
 </html>

登入後複製

此時得出的答案為“單擊”，此時為什麼可以呢？從程式碼中可以看出，在onclick事件呼叫函數btnClick()時，將this當作參數傳遞給了函數。

綜合以上：在函數呼叫時不能直接使用this.屬性來獲取，而必須將this當作參數傳遞。

window.event.srcElement:

下面看一個例子：

 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" >
 <head>
   <title>无标题页</title>
   <script type="text/javascript">
   function btnClick(){
    alert(window.event.srcElement.value);
   }
   </script>
 </head>
 <body>
 <input type="button" onclick="btnClick()" value="单击" />
 
 </body>
 </html>

登入後複製

此時得出的答案為“單擊”，說明在呼叫函數時可以使用window.event.srcElement.屬性來取得。

為什麼this不能直接使用而window.event.srcElement可以直接使用呢？從單純的字面上說this的意思是「當前」。在函數呼叫時，沒有指定具體是哪一個控件，在函數中直接用this是不可以的。在第二段程式碼中就將this當成了參數傳遞，所以能得到正確的答案。

其實this和window.event.srcElement的使用區別是：如果要直接使用this.屬性，此時的函數不能是被呼叫的而必須是回應函數，而window.event. srcElement則無此限制。

以上所述就是本文的全部內容了，希望大家能夠喜歡。

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7663

CakePHP 教程

1393

C# 教程

1205

steam的賬戶名稱是什麼格式

win11激活密鑰永久

Related knowledge

聊聊Vue2為什麼能透過this存取各種選項中屬性 Dec 08, 2022 pm 08:22 PM

這篇文章帶大家解讀vue原始碼，來介紹一下Vue2中為什麼可以使用 this 存取各種選項中的屬性，希望對大家有幫助！

一篇搞懂this指向，追趕70%的前端人 Sep 06, 2022 pm 05:03 PM

同事因為this指向的問題卡住的bug，vue2的this指向問題，使用了箭頭函數，導致拿不到對應的props。當我跟他介紹的時候他竟然不知道，隨後也刻意的看了一下前端交流群，至今最起碼還有70%以上的前端程式設計師搞不明白，今天給大家分享一下this指向，如果啥都沒學會，請給我一個大嘴巴子。

使用this關鍵字的巧妙方式在jQuery中 Feb 25, 2024 pm 04:09 PM

jQuery中this關鍵字的靈活運用在jQuery中，this關鍵字是一個非常重要且靈活的概念，它用來引用目前正在操作的DOM元素。透過合理的運用this關鍵字，我們可以方便地操作頁面中的元素，實現各種互動效果和功能。本文將結合具體的程式碼範例，介紹this關鍵字在jQuery中的靈活運用。簡單的this範例首先，我們來看一個簡單的this範例。假設我們有一

什麼是this？深入解析JavaScript中的this Aug 04, 2022 pm 05:02 PM

什麼是this？以下這篇文章跟大家介紹一下JavaScript中的this，並聊聊this在函數不同呼叫方式下的區別，希望對大家有所幫助！

Java中this方法怎麼使用 Apr 18, 2023 pm 01:58 PM

一、this關鍵字1.this的類型：哪個物件呼叫就是哪個物件的參考類型二、用法總結1.this.data;//存取屬性2.this.func();//存取方法3.this( );//呼叫本類別中其他建構方法三、解釋用法1.this.data這種是在成員方法中使用讓我們來看看不加this會出現什麼樣的狀況classMyDate{publicintyear;publicintmonth;publicintday; publicvoidsetDate(intyear,intmonth,intday){ye