Co to jest "this" w JavaScript onclick?

Question

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

Co oznacza this w skrypcie?

Answer 1

Jeśli o to pytasz, this reprezentuje element DOM HTML.

To byłby element <a>, który został kliknięty.

Answer 2

referes do obiektu, do którego należy metoda onclick. Więc wewnątrz functhis będzie węzłem DOM elementu a i this.innerText będzie here.

Answer 3

Odnosi się ona do elementu w DOM do którego cechą onclick należy: (. W tym przykładzie użyto jQuery)

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

Answer 4

Przy wywołaniu funkcji, słowo „to” jest odniesieniem do obiektu, który wywołał funkcję.

W twoim przykładzie jest to odniesienie do elementu zakotwiczenia. Na drugim końcu wywołanie funkcji uzyskuje dostęp do zmiennych składowych elementu za pośrednictwem parametru, który został przekazany.

Answer 5

Wartość atrybutów obsługi zdarzeń, takich jak onclick, powinna być po prostu JavaScriptem, bez prefiksu "javascript:". Javascript: pseudo-protokół jest używany w adresie URL, na przykład:

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

należy skorzystać z formularza onclick="func(this)" zamiast tego jednak. Zauważ też, że w powyższym przykładzie użycie javascript: pseudo-protokół "this" będzie odwoływać się do obiektu window, a nie do elementu <a>.

Answer 6

W JavaScript this odnosi 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 hide z this ukryje element. Zwraca tylko element kliknięty, nawet jeśli jest podobny do innych elementów w DOM.

Na przykład, możesz mieć this kliknięcie numeru w poniższym kodzie HTML spowoduje ukrycie tylko kliknięcia.

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

Answer 7

Tutaj (this) jest obiektem, który zawiera wszystkie funkcje/właściwości elementu dom. widać przez

console.log(this); 

ta wyświetli wszystkie atrybuty właściwości elementu DOM z hierarchii. Możesz manipulować elementem dom przez to.

opisać Również na poniższy link: -

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

Answer 8

kluczowe ten w addEventListener wydarzenie

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>