Apa "ini" di onclick JavaScript?

115

<a onclick="javascript:func(this)" >here</a>

Apa thisartinya di naskah?

javascript

— Oh Tuhan
sumber

4

@ JMCF125 Dia berhasil menjadi berguna pula. Saya mencari di Google tentang cara mendapatkan elemen yang diklik di acara onclick, dan berakhir di sini, di mana saya menemukan jawabannya.

— Buang Akun

apa javascript: lakukan? mengapa tidak seperti ini <a onclick="func(this)" >here</a>

— J3STER

1

@ J3STER Awalan "javascript:" salah di onclick. Penjelasannya bisa kamu temukan pada jawaban Tim Down di bawah ini .

— Mariano Desanze

97

Jika Anda bertanya tentang, thismewakili elemen DOM HTML.

Jadi itu akan menjadi <a>elemen yang diklik.

— TM.
sumber

5

Bisakah seseorang menautkan ke spesifikasi? Tampilan naif di w3.org/TR/DOM-Level-3-Events tidak membuahkan hasil.

— Ciro Santilli 郝海东冠状病六四事件法轮功

34

Ini mengacu pada elemen di DOM yang memiliki onclickatribut:

<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js">
</script>
<script type="text/javascript">
function func(e) {
  $(e).text('there');
}
</script>
<a onclick="func(this)">here</a>

(Contoh ini menggunakan jQuery .)

— Stephan202
sumber

22

Nilai atribut event handler seperti onclick seharusnya hanya berupa JavaScript, tanpa awalan "javascript:". Javascript: pseudo-protocol digunakan di URL, misalnya:

<a href="javascript:func(this)">here</a>

Anda harus menggunakan onclick="func(this)"formulir sebagai preferensi untuk ini. Perhatikan juga bahwa dalam contoh saya di atas menggunakan javascript: pseudo-protocol "this" akan merujuk ke objek jendela daripada <a>elemennya.

— Tim Down
sumber

1

Downvote yang menarik, meskipun saya kira secara tegas jawaban ini hanya menawarkan saran seputar pertanyaan daripada menjawab pertanyaan secara langsung.

— Tim Down

Ya ... Anda tidak benar-benar menjawab pertanyaan: - / tidak ada yang pribadi!

— Dave

1

@ Dave: Cukup adil. Pada saat saya menulis ini, pertanyaan utama sudah terjawab. Jawaban saya mungkin harus berupa komentar tetapi saya kira saya mungkin tidak memiliki cukup perwakilan untuk menambahkan komentar pada saat itu. Hidup dan belajar.

— Tim Down

8

Tidak cukup repetisi saat itu? memuntahkan anggurnya

— Jonathan

5

Dalam JavaScript thismengacu pada elemen yang mengandung aksi. Misalnya, jika Anda memiliki fungsi yang disebut hide():

function hide(element){
   element.style.display = 'none';
}

Memanggil hidedengan thisakan menyembunyikan elemen. Ini hanya mengembalikan elemen yang diklik, meskipun mirip dengan elemen lain di DOM.

Misalnya, Anda mungkin telah thismengklik nomor di HTML di bawah ini hanya akan menyembunyikan poin peluru yang diklik.

<ul>
  <li class="bullet" onclick="hide(this);">1</li>
  <li class="bullet" onclick="hide(this);">2</li>
  <li class="bullet" onclick="hide(this);">3</li>
  <li class="bullet" onclick="hide(this);">4</li>
</ul>

— Steffan Perry
sumber

4

Di sini (ini) adalah objek yang berisi semua fitur / properti dari elemen dom. Anda bisa melihat

console.log(this);

Ini akan menampilkan semua atribut properti dari elemen dom dengan hierarki. Anda dapat memanipulasi elemen dom dengan ini.

Jelaskan juga pada tautan di bawah ini: -

http://www.quirksmode.org/js/this.html

— Deepak Dholiyan
sumber

3

kata kunci ini dalam acara addEventListener

function getValue(o) {
  alert(o.innerHTML);
}

function hide(current) {
  current.setAttribute("style", "display: none");
}

var bullet = document.querySelectorAll(".bullet");

for (var x in bullet) { 
  bullet[x].onclick = function() {
    hide(this);
  };
};
 
/* Using dynamic DOM Event */
document.querySelector("#li").addEventListener("click", function() {
  getValue(this); /* this = document.querySelector("#li") Object */
});

li {
  cursor: pointer;
}

<ul>
  <li onclick="getValue(this);">A</li>
  <li id="li" >B</li>
  <hr />
  <li class="bullet" >1</li>
  <li class="bullet" >2</li>
  <li class="bullet" >3</li>
  <li class="bullet" >4</li>
</ul>

Luaskan cuplikan

— antelove
sumber

2

Saat memanggil suatu fungsi, kata "ini" adalah referensi ke objek yang disebut fungsi tersebut.

Dalam contoh Anda, ini adalah referensi ke elemen jangkar. Di ujung lain, pemanggilan fungsi kemudian mengakses variabel anggota elemen melalui parameter yang diteruskan.

— ichiban
sumber

1

thismerujuk ke objek tempat onclickmetode itu berada. Jadi di dalamnya func thisakan ada simpul DOM dari aelemen dan this.innerTextakan here.

— Gumbo
sumber