"นี่" ใน JavaScript onclick คืออะไร

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

อะไรthisหมายถึงในสคริปต์?

ในกรณีที่คุณกำลังถามเกี่ยวกับthisแสดงถึงองค์ประกอบ HTML DOM

มันจะเป็น<a>องค์ประกอบที่ถูกคลิก

มันหมายถึงองค์ประกอบในDOMซึ่งonclickเป็นของแอตทริบิวต์:

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

(ตัวอย่างนี้ใช้jQuery )

ค่าของแอตทริบิวต์ตัวจัดการเหตุการณ์เช่น onclick ควรเป็น JavaScript โดยไม่มีคำนำหน้า "javascript:" javascript: pseudo-protocol ใช้ใน URL ตัวอย่างเช่น:

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

คุณควรใช้onclick="func(this)"แบบฟอร์มนี้ตามต้องการ โปรดทราบว่าในตัวอย่างของฉันข้างต้นโดยใช้ javascript: pseudo-protocol "this" จะอ้างถึงวัตถุหน้าต่างแทนที่จะเป็น<a>องค์ประกอบ

ใน JavaScript thisหมายถึงองค์ประกอบที่มีการดำเนินการ ตัวอย่างเช่นหากคุณมีฟังก์ชันที่เรียกว่าhide():

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

การโทรhideด้วยthisจะซ่อนองค์ประกอบ จะส่งคืนเฉพาะองค์ประกอบที่คลิกแม้ว่าจะคล้ายกับองค์ประกอบอื่น ๆ ใน DOM ก็ตาม

ตัวอย่างเช่นคุณอาจthisคลิกตัวเลขใน HTML ด้านล่างจะซ่อนเฉพาะสัญลักษณ์แสดงหัวข้อย่อยที่คลิกเท่านั้น

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

ที่นี่ (นี่) คือวัตถุที่มีคุณสมบัติ / คุณสมบัติทั้งหมดขององค์ประกอบ dom คุณสามารถดูได้โดย

console.log(this);

สิ่งนี้จะแสดงคุณสมบัติแอตทริบิวต์ทั้งหมดขององค์ประกอบ dom ที่มีลำดับชั้น คุณสามารถจัดการองค์ประกอบ dom ได้โดยสิ่งนี้

อธิบายในลิงค์ด้านล่าง: -

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

คีย์เวิร์ดนี้ในเหตุการณ์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>

เมื่อเรียกใช้ฟังก์ชันคำว่า "this" เป็นการอ้างอิงถึงวัตถุที่เรียกฟังก์ชัน

ในตัวอย่างของคุณเป็นการอ้างอิงถึงองค์ประกอบจุดยึด ในอีกด้านหนึ่งการเรียกใช้ฟังก์ชันจะเข้าถึงตัวแปรสมาชิกขององค์ประกอบผ่านพารามิเตอร์ที่ถูกส่งผ่าน

thisอ้างอิงถึงวัตถุที่onclickเมธอดเป็นของ ดังนั้นภายในfunc thisจะเป็นโหนด DOM ของaองค์ประกอบและจะเป็นthis.innerTexthere