cari

Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang THIS dan WINDOW.EVENT.SRCELEMENT dalam kemahiran JS_javascript

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal
2016-05-16 15:57:491450semak imbas

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()"/>

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)"/>

Tiada masalah!

Kaedah 2: 

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

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>

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>

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>

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>

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.

Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk melaksanakan troli beli-belah terapung dengan kemahiran cookies_javascript jsArtikel seterusnya：Bagaimana untuk melaksanakan troli beli-belah terapung dengan kemahiran cookies_javascript js

Artikel berkaitan

Lihat lagi