¿Puedo obtener el elemento html en una función de activación de eventos en javascript?

Editar: debo mencionar que no quiero usar jQuery. Este es mi código. Necesito acceder al elemento que desencadenó el evento de modo que no tenga que hacer dos funciones diferentes para cada elemento html.

document.getElementById("login").onmouseover = turnWhite;

function turnWhite(e){  
}

Necesito tal vez algo como esto. Aunque no se si es posible.

function turnWhite(e){
    e.HTMLEL.style.color = "white"; 
}

¿Es esto posible?

preguntado el 08 de marzo de 13 a las 21:03

No está usando jQuery. -

5 Respuestas

Según javascripter.net

  • e.srcElement en Internet Explorer
  • e.target en la mayoría de los demás navegadores.

respondido 08 mar '13, 21:03

no sabia de este sitio web. Muchísimas gracias. - Vlad Otrocol

Yo tampoco. Afortunadamente, el "objetivo de eventos de javascript" de Google lo sabe. - Barmar

Si quisiera aplicar la misma función de evento a un conjunto de elementos, podría intentar algo como esto:

var buttons = document.getElementsByClassName("change");
for(var i = 0;i < buttons.length;i++){
    buttons[i].onmouseover = function(){
        this.style.color = "red"; 
    }
}

Demostración: http://jsfiddle.net/louisbros/rt24U/

respondido 08 mar '13, 21:03

Deberías poder usar e.target or e.currentTarget. Sin embargo, el comportamiento parece ser diferente según el navegador... Es mejor usar una biblioteca como jquery o yui. Aquí hay algo de documentación.

respondido 08 mar '13, 21:03

Aquí está el JSFiddle para que puedas jugar con él: http://jsfiddle.net/9nr4Y/

HTML:

<div class="login">Login</div>
<br />
<div class="login">Login 2</div>

JavaScript:

(function() {
    var elms = document.getElementsByClassName("login"),
        l = elms.length, i;
    for( i = 0; i < l; i++ ) {
        ( function( i ) {
            elms[i].onmouseover = function() {
                this.style.color = "#000000";
                this.style.background = "#FFFFFF";
            };
        })(i);

        ( function( i ) {
            elms[i].onmouseout = function() {
                this.style.color = "#FFFFFF";
                this.style.background = "#000000";
            }
        })(i);
    }
})();

Cree una función de autoinvocación que luego obtenga los elementos por un nombre de clase. La razón de esto es que realmente no desea tener más de un elemento con la ID de todos modos. Obtener el nombre de la clase generará una matriz de elementos que tienen esa clase. Luego puede iterar sobre la nueva matriz y asignar el evento a cada uno de ellos.

Entonces obtenemos cada elemento individual con "esto" en lugar del evento real.

Para referencia: Cómo obtener el elemento actual en getElementsByClassName

contestado el 23 de mayo de 17 a las 13:05

También podría optar por este truco no estándar entre navegadores:

document.getElementById("login").onmouseover = function () { turnWhite(); }

function turnWhite(){  
    var myEventElement = turnWhite.caller.arguments[0].target;
    //do something with myEventElement
}

Útil si quieres evitar pasar parrams.

Demostración: http://codepen.io/mrmoje/pen/avbEm

Respondido el 29 de enero de 14 a las 04:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.