Co to jest „to” w JavaScript onclick?

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

Co thisoznacza w scenariuszu?

W przypadku, o który pytasz, thisreprezentuje element HTML DOM.

Więc to byłby <a>element, na który kliknięto.

Odnosi się do elementu w DOM, do którego onclicknależy atrybut:

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

(W tym przykładzie zastosowano jQuery .)

Wartością atrybutów obsługi zdarzeń, takich jak onclick, powinna być po prostu JavaScript, bez przedrostka „javascript:”. Pseudo-protokół javascript: jest używany w adresie URL, na przykład:

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

Powinieneś jednak używać onclick="func(this)"formularza zamiast tego. Zauważ również, że w powyższym przykładzie przy użyciu pseudo-protokołu javascript: „this” będzie odnosić się do obiektu window, a nie do <a>elementu.

W JavaScript thisodnosi się do elementu zawierającego akcję. Na przykład, jeśli masz funkcję o nazwie hide():

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

Wywołanie za hidepomocą thisspowoduje ukrycie elementu. Zwraca tylko kliknięty element, nawet jeśli jest podobny do innych elementów w DOM.

Na przykład thiskliknięcie liczby w kodzie HTML poniżej może ukryć tylko kliknięty punktor.

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

Tutaj (to) jest obiekt, który zawiera wszystkie cechy / właściwości elementu dom. możesz zobaczyć przez

console.log(this);

Spowoduje to wyświetlenie wszystkich właściwości atrybutów elementu dom z hierarchią. W ten sposób możesz manipulować elementem dom.

Opisz także pod poniższym linkiem: -

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

słowo kluczowe this w zdarzeniu 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>

Podczas wywoływania funkcji słowo „this” jest odniesieniem do obiektu, który wywołał funkcję.

W twoim przykładzie jest to odniesienie do elementu kotwicy. Z drugiej strony wywołanie funkcji uzyskuje dostęp do zmiennych składowych elementu za pośrednictwem przekazanego parametru.

thisodnosi się do obiektu, do którego onclicknależy metoda. Więc wewnątrz func thisbędzie węzeł DOM aelementu i this.innerTextbędzie here.