<a onclick="javascript:func(this)" >here</a>
¿Qué this
significa en el guión?
fuente
<a onclick="javascript:func(this)" >here</a>
¿Qué this
significa en el guión?
En el caso que esté preguntando, this
representa el elemento DOM HTML.
Entonces sería el <a>
elemento en el que se hizo clic.
Se refiere al elemento del DOM al que onclick
pertenece 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 ).
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.
En JavaScript se this
refiere al elemento que contiene la acción. Por ejemplo, si tiene una función llamada hide()
:
function hide(element){
element.style.display = 'none';
}
Llamar hide
con this
ocultará 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 this
hacer 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>
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:
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>
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ó.
this
se refiere al objeto al onclick
que pertenece el método. Entonces, adentro func
this
estaría el nodo DOM del a
elemento y this.innerText
sería here
.
<a onclick="func(this)" >here</a>