JavaScript onclick'te "bu" nedir?

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

thisSenaryoda ne anlama geliyor?

Sorduğunuz durumda this, HTML DOM öğesini temsil eder.

Yani <a>tıklanan öğe olacaktır .

Özelliğin ait olduğu DOM'daki öğeyi ifade eder 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>

(Bu örnekte jQuery kullanılmaktadır .)

Onclick gibi olay işleyici özelliklerinin değeri, herhangi bir "javascript:" öneki olmadan yalnızca JavaScript olmalıdır. Javascript: sözde protokol bir URL'de kullanılır, örneğin:

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

onclick="func(this)"Yine de bunun yerine formu tercih etmelisiniz . Ayrıca yukarıdaki javascript: sözde protokolü kullandığım örnekte "this" <a>öğesinin öğe yerine pencere nesnesine atıfta bulunacağını unutmayın .

JavaScript'te thiseylemi içeren öğeyi ifade eder. Örneğin, adında bir işleviniz varsa hide():

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

Çağrı hideile thiseleman gizler. DOM'daki diğer öğelere benzer olsa bile yalnızca tıklanan öğeyi döndürür.

Örneğin, thisaşağıdaki HTML'de bir sayıya tıklamak yalnızca tıklanan madde işaretini gizleyecektir.

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

Burada (bu), dom elemanının tüm özelliklerini / özelliklerini içeren bir nesnedir. Görebilirsin

console.log(this);

Bu, hiyerarşiyle birlikte dom öğesinin tüm öznitelik özelliklerini görüntüler. Dom öğesini bununla değiştirebilirsiniz.

Ayrıca aşağıdaki bağlantıda açıklayın: -

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

anahtar kelime bu yer addEventListener olay

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>

Bir işlevi çağırırken, "bu" sözcüğü işlevi çağıran nesneye bir referanstır.

Örneğinizde, bağlantı elemanına bir referanstır. Diğer uçta, işlev çağrısı daha sonra iletilen parametre aracılığıyla öğenin üye değişkenlerine erişir.

thisonclickyöntemin ait olduğu nesneyi ifade eder . Yani içinde elementin func thisDOM düğümü olur ave this.innerTextolur here.