añadiendo evento como parámetro dentro de la función, usando addEventListener (No funciona en FF/IE). Javascript

<html> 
<head> 
<title>FML</title> 

<script type="text/javascript"> 

function function1(e, div) { 
div.innerHTML="this works" 
document.getElementById('myspan').innerHTML= 'x-pos on click: ' + e.clientX 
div.addEventListener("mousemove", function(){test(event, this)}, true); 
} 

function test(e, div) { 
div.innerHTML+='<br/>so does this' 
//This doesn't work. Can't add event as a parameter to function that has to be executed when using addEventListener 
document.getElementById('myspan2').innerHTML= 'y-pos on move: ' + e.clientY 
} 

</script> 
</head> 
<body> 
<span id="myspan">&nbsp;</span> 
<span id="myspan2">&nbsp;</span> 
<div style="width:100px;height:100px;background-color:blue;overflow:hidden;" onclick="function1(event, this)"> 
</body> 
</html>

Haga clic en el azul div.añadiendo evento como parámetro dentro de la función, usando addEventListener (No funciona en FF/IE). Javascript

quiero añadir el mouseover caso, tienen que ejecutar la prueba() - función que debe contener los siguientes parámetros: este, caso

Cuando la prueba de funcionamiento (e, div) se llama Me aparece un " el evento no está definido "error en Firefox y IE, aunque, irónicamente, funciona perfectamente en Chrome y Safari.

De cualquier forma puedo agregar el parámetro de evento usando addEventListener? Puedo hacer que funcione con window.event en Chrome y Safari, pero esta es la configuración exacta que quiero. He estado buscando y probando/error por un tiempo, sin éxito ... así que FML:/¿Alguna sugerencia/sugerencia/... además de dispararme en la cabeza?

Sé que jquery probablemente resolvería todo esto, pero quiero ser hábil en javascript antes de migrar a jQuery. ¿O debería migrar de todos modos?

Gracias y saludos, p.

Fuente

2011-09-12 Pascalculator

Además de mi respuesta, los pulgares hacia arriba para "Sé que jquery probablemente resolvería todo esto, pero quiero ser hábil en javascript antes de migrar a jQuery". Esta es la forma correcta de aprender un idioma. Y parece raro en la comunidad JS. Porque he visto gente, aquí en SO, que incluso estaban pidiendo una construcción especial en jQuery que se hiciera para sustituir if-then-else ... :-D – Imp

div.addEventListener("mousemove", function(){test(event, this)}, true);

¡Bien, por supuesto usted consigue "el evento no está definido"! Cuando el evento mousemove activa, el controlador de eventos se llama:

function(){test(event, this)}

Hay dos maneras de llegar al objeto de información de evento. O bien se pasa al controlador de eventos como argumento, o se puede encontrar en window.event.

Supongamos que se cumple la segunda caja. Como no hay una variable local llamada event en su función, ni hay tal variable en function1 que la llame, el navegador busca si hay un event definido en el objeto global. En JavaScript, el objeto global se llama window, por lo que su función se interpreta como

function(){test(window.event, this)}

y funciona.

Sin embargo, como señalé anteriormente, en algunos navegadores, la información del evento se pasa en el argumento. Por lo que su controlador de eventos probablemente quería tener este aspecto:

function(event){test(event, this)}

de lo contrario el event pasado a test() sería undefined. Por lo tanto, esto es cómo hacer que un controlador multi-navegador:

function(event) { 
    if (!event) // i.e. the argument is undefined or null 
     event = window.event; 

    test(event, this); 
}

El segundo problema es que addEventListener() no funciona en IE mayores (lo hace en IE9, sin embargo). Para IEs más antiguas, debe usar una función similar llamada attachEvent().O, si sólo se conecta un manejador, puede hacerlo de la manera sencilla

div.onmousemove = function() {...};

Fuente

2012-05-11 23:31:19 Imp

¡Guau, gracias! Esto me estaba molestando por demasiado tiempo, nunca pensé que esto se resolvería alguna vez. Parece que eres un purista :) Sin embargo, he migrado a jQuery, pero todavía uso (afortunadamente) JavaScript para las cosas más pequeñas, así que no tengo que cargar una biblioteca completa (jQuery). – Pascalculator

¿Se puede eliminar el detector de eventos con este enfoque? De lo contrario, ¿cuál es el sentido de anidar una función nombrada dentro de una función anónima de esta manera? –

En algunos navegadores como Firefox el caso tiene que ser pasado como un parámetro, por lo que tenga que sustituir el código

div.addEventListener("mousemove", function(){test(event, this)}, true);

con este

div.addEventListener("mousemove", function(event){test(event, this)}, true);

comparar cuidadosamente las dos líneas de código y observe el evento propiedad pasada como parámetro de la función agregada a la segunda fila.

para viejo IE ver attachEvent() tiene que ser utilizado;

div.attachEvent("onclick", function(event){test(event, this)});

en cuenta que attachEvent ha sido sustituido en js estándar modernas con addEventListener y ahora casi toda la ayuda navegador moderno que.

Aquí http://caniuse.com/#feat=addeventlistener es posible ver la tabla de compatibilidad.

Fuente

2017-02-03 14:58:28

añadiendo evento como parámetro dentro de la función, usando addEventListener (No funciona en FF/IE). Javascript

Respuesta

Cuestiones relacionadas