Qu'est-ce que c'est "ceci" en JavaScript onclick?

Question

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

Que signifie this dans le script?

Answer 1

Dans le cas où vous posez la question, this représente l'élément HTML DOM.

Donc ce serait l'élément <a> qui a été cliqué.

Answer 2

this fait référence à l'objet auquel appartient la méthode onclick. Donc à l'intérieur functhis serait le nœud DOM de l'élément a et this.innerText serait here.

Answer 3

Il fait référence à l'élément dans le DOM auquel l'attribut onclick appartient: (. Cet exemple utilise 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

Lorsque vous appelez une fonction, le mot « ceci » est une référence à l'objet qui a appelé la fonction.

Dans votre exemple, il s'agit d'une référence à l'élément d'ancrage. À l'autre extrémité, l'appel de la fonction accède alors aux variables membres de l'élément via le paramètre qui a été passé.

Answer 5

La valeur des attributs du gestionnaire d'événements, tels que onclick, doit simplement être JavaScript, sans préfixe "javascript:". Le javascript: pseudo-protocole est utilisé dans une URL, par exemple:

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

Vous devez utiliser le formulaire onclick="func(this)" de préférence à ce bien. Notez également que dans mon exemple ci-dessus en utilisant le javascript: pseudo-protocole "this" fera référence à l'objet window plutôt qu'à l'élément <a>.

Answer 6

En JavaScript this fait référence à l'élément contenant l'action. Par exemple, si vous avez une fonction appelée hide():

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

Appel hide avec this cachera l'élément. Il renvoie uniquement l'élément cliqué, même s'il est similaire aux autres éléments du DOM. Par exemple, vous pouvez avoir this en cliquant sur un nombre dans le code HTML ci-dessous ne fera que masquer le point sur lequel vous avez cliqué.

<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

Ici (ceci) est un objet qui contient toutes les caractéristiques/propriétés de l'élément dom. vous pouvez voir par

console.log(this); 

Cela permet d'afficher tous les attributs propriétés de l'élément dom avec la hiérarchie. Vous pouvez manipuler l'élément dom par ceci.

décrivent également sur le lien ci-dessous: -

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

Answer 8

mot-clé cette dans addEventListener événement

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>