Qu'est-ce que «ceci» dans JavaScript onclick?

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

Que thissignifie le script?

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

Ce serait donc l' <a>élément sur lequel on aurait cliqué.

Il fait référence à l'élément du DOM auquel l' onclickattribut appartient:

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

(Cet exemple utilise jQuery .)

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

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

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

En JavaScript thisfait 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';
}

Appeler hideavec thismasquera l'élément. Il ne renvoie que l'élément cliqué, même s'il est similaire à d'autres éléments du DOM.

Par exemple, vous pouvez avoir thiscliqué sur un nombre dans le code HTML ci-dessous pour masquer uniquement la puce sur laquelle 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>

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

console.log(this);

Cela affichera toutes les propriétés d'attributs de l'élément dom avec une hiérarchie. Vous pouvez manipuler l'élément dom de cette manière.

Décrivez également sur le lien ci-dessous: -

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

mot - clé this dans l' événement 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>

Lors de l'appel d'une fonction, le mot «this» 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 fonction accède alors aux variables membres de l'élément via le paramètre qui a été passé.

thisfait référence à l'objet auquel onclickappartient la méthode. Donc à l'intérieur se func thistrouverait le nœud DOM de l' aélément et le this.innerTextserait here.