¿Qué es “esto” en JavaScript onclick?

115

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

¿Qué thissignifica en el guión?

javascript

— Dios mio
fuente

4

@ JMCF125 Se las arregló para ser útil de todos modos. Busqué en Google cómo obtener el elemento en el que se hizo clic en un evento onclick y terminé aquí, donde encontré la respuesta.

— Throw Away Account

¿Qué hace el javascript:? ¿Por qué no es así <a onclick="func(this)" >here</a>

— J3STER

1

@ J3STER El prefijo "javascript:" es incorrecto en onclick. Puede encontrar la explicación en la respuesta de Tim Down a continuación .

— Mariano Desanze

97

En el caso que esté preguntando, thisrepresenta el elemento DOM HTML.

Entonces sería el <a>elemento en el que se hizo clic.

— TM.
fuente

5

¿Alguien puede vincular a la especificación? Una mirada ingenua a w3.org/TR/DOM-Level-3-Events fue infructuosa.

— Ciro Santilli 郝海东冠状病六四事件法轮功

34

Se refiere al elemento del DOM al que onclickpertenece el atributo:

<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 ejemplo usa jQuery ).

— Stephan202
fuente

22

El valor de los atributos del controlador de eventos, como onclick, debe ser solo JavaScript, sin ningún prefijo "javascript:". El pseudo-protocolo javascript: se utiliza en una URL, por ejemplo:

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

Sin onclick="func(this)"embargo, debe utilizar el formulario en lugar de este. También tenga en cuenta que en mi ejemplo anterior usando el pseudo-protocolo javascript: "esto" se referirá al objeto de la ventana en lugar del <a>elemento.

— Tim Down
fuente

1

Interesante voto negativo, aunque supongo que, estrictamente hablando, esta respuesta solo ofrece consejos sobre la pregunta en lugar de responder directamente a la pregunta.

— Tim Down

Sí ... realmente no respondiste a la pregunta: - / ¡nada personal!

— Dave

1

@Dave: Bastante justo. Cuando escribí esto, la pregunta principal ya estaba respondida. Mi respuesta probablemente debería haber sido un comentario, pero sospecho que es posible que no haya tenido suficiente representante para agregar un comentario en ese momento. Vive y aprende.

— Tim Down

8

¿No tienes suficiente representante en ese momento? escupe su vino

— Jonathan

5

En JavaScript se thisrefiere al elemento que contiene la acción. Por ejemplo, si tiene una función llamada hide():

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

Llamar hidecon thisocultará el elemento. Devuelve solo el elemento en el que se hizo clic, incluso si es similar a otros elementos del DOM.

Por ejemplo, es posible que al thishacer clic en un número en el código HTML a continuación, solo se oculte la viñeta en la que se hizo clic.

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

4

Aquí (esto) es un objeto que contiene todas las características / propiedades del elemento dom. puedes ver por

console.log(this);

Esto mostrará todas las propiedades de los atributos del elemento dom con jerarquía. Puede manipular el elemento dom con esto.

También describa en el siguiente enlace:

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

— Deepak Dholiyan
fuente

3

palabra clave this en el 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>

Expandir fragmento

— antelove
fuente

2

Al llamar a una función, la palabra "esto" es una referencia al objeto que llamó a la función.

En su ejemplo, es una referencia al elemento ancla. En el otro extremo, la llamada a la función accede a las variables miembro del elemento a través del parámetro que se pasó.

— Ichibán
fuente

1

thisse refiere al objeto al onclickque pertenece el método. Entonces, adentro func thisestaría el nodo DOM del aelemento y this.innerTextsería here.

— Gumbo
fuente