Penjelasan terperinci tentang THIS dan WINDOW.EVENT.SRCELEMENT dalam kemahiran JS

Penjelasan terperinci tentang THIS dan WINDOW.EVENT.SRCELEMENT dalam kemahiran JS_javascript

WBOY

Lepaskan： 2016-05-16 15:57:49

asal

1343 orang telah melayarinya

Mari kita lihat contoh mudah dahulu:

Salin kod Kod adalah seperti berikut:

Tiada masalah sama sekali.

Jadi dalam keadaan apa ia tidak boleh digunakan?

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

Salin selepas log masuk

Ini tidak mungkin kerana method() ialah fungsi yang dipanggil oleh fungsi tindak balas.

Jadi apa yang perlu anda lakukan dalam situasi ini?

Kaedah 1:

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

Salin selepas log masuk

Tiada masalah!

Kaedah 2:

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

Salin selepas log masuk

Tiada masalah! window.event.srcElement mendapat kawalan yang mencetuskan acara

Kami sedang melihat contoh yang lebih berbelit-belit

<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>

Salin selepas log masuk

Mari kita lihat perbezaan dan kaitan antara keduanya

ini:

Mari lihat contoh:

 <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>

Salin selepas log masuk

Jawapan yang muncul pada masa ini ialah "tidak ditentukan", yang bermaksud atribut ini tidak boleh digunakan untuk mendapatkannya apabila memanggil fungsi. Mari lihat contoh seterusnya:

 <!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>

Salin selepas log masuk

Jawapan yang diperolehi pada masa ini ialah "klik", mengapa boleh pada masa ini? Seperti yang dapat dilihat daripada kod, apabila acara onclick memanggil fungsi btnClick(), ini dihantar kepada fungsi sebagai parameter.

Untuk meringkaskan perkara di atas: Apabila memanggil fungsi, anda tidak boleh menggunakan atribut ini secara langsung untuk mendapatkannya, tetapi ini mesti dihantar sebagai parameter.

window.event.srcElement:

Lihat contoh di bawah:

 <!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>

Salin selepas log masuk

Jawapan yang diperoleh pada masa ini ialah "klik", menunjukkan bahawa anda boleh menggunakan sifat window.event.srcElement untuk mendapatkannya apabila memanggil fungsi.

Mengapa ini tidak boleh digunakan secara langsung tetapi window.event.srcElement boleh digunakan secara terus? Dalam erti kata literal ini bermaksud "semasa". Apabila fungsi dipanggil, kawalan khusus tidak dinyatakan. Ia tidak dibenarkan untuk menggunakannya secara langsung dalam fungsi. Dalam sekeping kod kedua, ini diluluskan sebagai parameter, jadi jawapan yang betul boleh diperolehi.

MalahPerbezaan antara penggunaan ini dan window.event.srcElement ialah: jika anda ingin menggunakan atribut ini secara langsung, fungsi pada masa ini tidak boleh dipanggil tetapi mestilah fungsi tindak balas , manakala window.event srcElement tidak mempunyai sekatan sedemikian.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.