¿Qué es "esto" en JavaScript haciendo clic?

Question

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

¿Qué significa this en el script?

Answer 1

En el caso que está preguntando acerca de, this representa el elemento HTML DOM.

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

Answer 2

this se refiere al objeto al que pertenece el método onclick. Por lo tanto, dentro de functhis sería el nodo DOM del elemento a y this.innerText sería here.

Answer 3

Se hace referencia al elemento en el DOM a la que pertenece el atributo onclick: (. En este ejemplo se utiliza 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

Cuando se llama a una función, la palabra "este" es una referencia al objeto que llamó a la función.

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

Answer 5

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

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

Se debe utilizar la forma onclick="func(this)" con preferencia a esto sin embargo. También tenga en cuenta que en mi ejemplo anterior utilizando el javascript: pseudo-protocolo "this" se referirá al objeto ventana en lugar del elemento <a>.

Answer 6

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

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

Calling hide con this se oculta el elemento. Devuelve solo el elemento al que se hizo clic, incluso si es similar a otros elementos en el DOM.

Por ejemplo, puede tener this haciendo clic en un número en el código HTML a continuación solo se ocultará el punto de la viñeta en el 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> 

Answer 7

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

console.log(this); 

Esto mostrará todos los atributos propiedades del elemento DOM con la jerarquía. Puede manipular el elemento dom de esta manera.

también describen en el siguiente enlace: -

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

Answer 8

palabra clave este en addEventListener caso

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>