O que é “isto” no onclick do JavaScript?

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

O que thissignifica no script?

AMD
fonte
4
@ JMCF125 Ele conseguiu ser útil de qualquer maneira. Pesquisei no Google como obter o elemento que foi clicado em um evento onclick e acabei aqui, onde encontrei a resposta.
Jogue fora a conta
o que o javascript: faz? por que não é assim <a onclick="func(this)" >here</a>
J3STER
1
@ J3STER O prefixo "javascript:" está incorreto em onclick. Você pode encontrar a explicação na resposta de Tim Down abaixo .
Mariano Desanze

Respostas:

97

No caso que você está perguntando sobre, thisrepresenta o elemento HTML DOM.

Portanto, seria o <a>elemento que foi clicado.

TM.
fonte
5
Alguém pode fazer um link para a especificação? Olhar ingênuo em w3.org/TR/DOM-Level-3-Events foi infrutífero.
Ciro Santilli 郝海东 冠状 病 六四 事件 法轮功
34

Refere-se ao elemento no DOM ao qual o onclickatributo pertence:

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

(Este exemplo usa jQuery .)

Stephan202
fonte
22

O valor dos atributos do manipulador de eventos, como onclick, deve ser apenas JavaScript, sem qualquer prefixo "javascript:". O javascript: pseudo-protocolo é usado em um URL, por exemplo:

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

No onclick="func(this)"entanto, você deve usar o formulário de preferência. Observe também que no meu exemplo acima, usando o javascript: pseudo-protocolo, "isso" se referirá ao objeto da janela em vez do <a>elemento.

Tim Down
fonte
1
Avaliação negativa interessante, embora eu suponha que, estritamente falando, essa resposta apenas ofereça conselhos sobre a questão, em vez de responder diretamente a ela.
Tim Down
Sim ... você realmente não respondeu à pergunta: - / nada pessoal!
Dave
1
@Dave: Muito justo. No momento em que escrevi isso, a questão principal já havia sido respondida. Minha resposta provavelmente deveria ter sido um comentário, mas suspeito que não tive representantes suficientes para adicionar um comentário na época. Viva e aprenda.
Tim Down
8
Não há representação suficiente no momento? cospe vinho
Jonathan
5

Em JavaScript thisrefere-se ao elemento que contém a ação. Por exemplo, se você tem uma função chamada hide():

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

Chamar hidecom thisocultará o elemento. Ele retorna apenas o elemento clicado, mesmo que seja semelhante a outros elementos no DOM.

Por exemplo, você pode ter thisclicar em um número no HTML abaixo para ocultar apenas o marcador clicado.

<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>
Steffan Perry
fonte
4

Aqui (this) é um objeto que contém todos os recursos / propriedades do elemento dom. você pode ver por

console.log(this);

Isso exibirá todas as propriedades de atributos do elemento dom com hierarquia. Você pode manipular o elemento dom com isso.

Descreva também no link abaixo: -

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

Deepak Dholiyan
fonte
3

palavra - chave this no evento 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>

amor
fonte
2

Ao chamar uma função, a palavra "this" é uma referência ao objeto que chamou a função.

Em seu exemplo, é uma referência ao elemento âncora. Na outra extremidade, a chamada de função acessa as variáveis ​​de membro do elemento por meio do parâmetro que foi passado.

Ichibã
fonte
1

thisrefere-se ao objeto ao qual o onclickmétodo pertence. Portanto, dentro func thisestaria o nó DOM do aelemento e this.innerTextseria here.

quiabo
fonte