 |
Referencia del objeto que generó el evento (this).
Referencia del objeto que generó el evento (this)
Cuando tenemos varios objetos que generan eventos y todos se asocian con una única función podemos pasar en la llamada a la función la referencia del objeto que emite el evento, esto mediante la palabra clave this.
Veamos con un ejemplo su funcionamiento. Dispondremos dos botones que al ser presionados llaman a una misma función.
Mostraremos algunas de las propiedades de los objetos que emitieron el evento.
<!DOCTYPE html>
<html>
<head>
<title>Problema</title>
<script >
function mostrarAtributos(objeto)
{
var ref=document.getElementById('titulo');
ref.firstChild.nodeValue='Name:'+objeto.name+' Id:'+objeto.id+' Value:'+objeto.value;
}
</script>
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<h1 id="titulo">Datos del objeto que emite el evento.</h1>
<input type="button" name="boton1" value="boton 1" id="b1" onclick="mostrarAtributos(this)">
<br>
<input type="button" name="boton2" value="boton 2" id="b2" onclick="mostrarAtributos(this)">
</body>
</html>
El código de javascript es:
function mostrarAtributos(objeto)
{
var ref=document.getElementById('titulo');
ref.firstChild.nodeValue='Name:'+objeto.name+' Id:'+objeto.id+' Value:'+objeto.value;
}
La forma de inicializar la propiedad onclick ahora es:
onclick="mostrarAtributos(this)"
En la función mostrarAtributos primero obtenemos la referencia al párrafo donde mostraremos los datos:
var ref=document.getElementById('titulo');
Y luego accedemos a su nodo hijo (es decir al nodo de texto) para mostrar la informacion sobre las propiedades del objeto que generó el evento:
ref.firstChild.nodeValue='Name:'+objeto.name+' Id:'+objeto.id+' Value:'+objeto.value;