attachEvent versus addEventListener

Question

Tengo problemas para lograr que attachEvent funcione. En todos los navegadores compatibles con el controlador addEventListener, el código siguiente funciona como un hechizo, pero en IE es un desastre completo. Tienen su propia variación (incompleta) llamada attachEvent.

Ahora aquí está el trato. ¿Cómo hago para que el evento attachEvent funcione de la misma manera que lo hace addEventListener?

Aquí está el código:

function aFunction(idname) 
{ 
    document.writeln('<iframe id="'+idname+'"></iframe>'); 
    var Editor = document.getElementById(idname).contentWindow.document; 

    /* Some other code */ 

    if (Editor.attachEvent) 
    { 
     document.writeln('<textarea id="'+this.idname+'" name="' + this.idname + '" style="display:none">'+this.html+'</textarea>'); 
     Editor.attachEvent("onkeyup", KeyBoardHandler); 
    } 
    else 
    { 
     document.writeln('<textarea id="hdn'+this.idname+'" name="' + this.idname + '" style="display:block">'+this.html+'</textarea>'); 
     Editor.addEventListener("keyup", KeyBoardHandler, true); 
    } 
} 

Este llama a la función KeyBoardHandler que tiene este aspecto:

function KeyBoardHandler(Event, keyEventArgs) { 
    if (Event.keyCode == 13) { 
     Event.target.ownerDocument.execCommand("inserthtml",false,'<br />'); 
     Event.returnValue = false; 
    } 

    /* more code */ 
} 

no quiero utilizar cualquier marcos porque a) Estoy tratando de aprender y entender algo, y B) cualquier marco es solo una sobrecarga de código que voy a usar.

¡Cualquier ayuda es muy apreciada!

Answer 1

Puede que sea mejor utilizar un marco de JavaScript como MooTools o jQuery de su elección para facilitar el soporte de navegadores cruzados. Para más detalles, véase también

• http://mootools.net/docs/core/Element/Element.Event
• http://api.jquery.com/category/events/

puerto MooTools de partes de su código de ejemplo:

var Editor = $(idname).contentWindow.document; 
... 
$(document.body).grab(new Element('textarea', { 
    'id' : this.idname, 
    'name' : this.idname, 
    'style': 'display:none;', 
    'html' : this.html 
}); 
Editor.addEvent('keyup', KeyBoardHandler); 

Por cierto, es a propósito que utilice tanto idname y this.idname en el código de arriba?

Answer 2

Simplemente use un marco como jQuery o prototipo. Para eso están ahí, esta es la razón exacta: ser capaces de hacer este tipo de cosas sin tener que preocuparse por la compatibilidad entre navegadores. Es super fácil de instalar ... basta con incluir un script js y añadir una línea de código ...

(editado sólo para que la Media Luna fresca)

Con un marco, el código es tan simple como. ..

<script type='text/javascript' src='jquery.js'></script> 
$('element').keyup(function() { 
    // stuff to happen on event here 
}); 

Answer 3

Aquí es una función que utilizo para ambos navegadores:

function eventListen(t, fn, o) { 
    o = o || window; 
    var e = t+Math.round(Math.random()*99999999); 
    if (o.attachEvent) { 
     o['e'+e] = fn; 
     o[e] = function(){ 
      o['e'+e](window.event); 
     }; 
     o.attachEvent('on'+t, o[e]); 
    }else{ 
     o.addEventListener(t, fn, false); 
    } 
} 

Y usted puede utilizarlo como:

eventListen('keyup', function(ev){ 
    if (ev.keyCode === 13){ 
    ... 
    } 
    ... 
}, Editor) 

Answer 4

Los diferentes navegadores procesarán los eventos de forma diferente. Algunos navegadores tienen burbujas de eventos que arrojan los controles donde algunos van hacia arriba. Para obtener más información acerca de que echar un vistazo a este documento W3C: http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

En cuanto a este ajuste, el parámetro "userCapture" false para el addEventListener tema específico hará que los eventos se comportan igual que Internet Explorer: https://developer.mozilla.org/en/DOM/element.addEventListener#Internet_Explorer

Answer 5

El fuente de sus problemas es la función KeyBoardHandler.Específicamente, en IE Event los objetos no tienen una propiedad target: el equivalente es srcElement. Además, la propiedad returnValue de los objetos Event es solo de IE. Desea el método preventDefault() en otros navegadores.

function KeyBoardHandler(evt, keyEventArgs) { 
    if (evt.keyCode == 13) { 
     var target = evt.target || evt.srcElement; 
     target.ownerDocument.execCommand("inserthtml",false,'<br />'); 
     if (typeof evt.preventDefault != "undefined") { 
      evt.preventDefault(); 
     } else { 
      evt.returnValue = false; 
     } 
    } 

    /* more code */ 
} 

Answer 6

A continuación, se indica cómo hacer que esto funcione entre navegadores, solo como referencia.

var myFunction=function(){ 
    //do something here 
} 
var el=document.getElementById('myId'); 

if (el.addEventListener) { 
    el.addEventListener('mouseover',myFunction,false); 
    el.addEventListener('mouseout',myFunction,false); 
} else if(el.attachEvent) { 
    el.attachEvent('onmouseover',myFunction); 
    el.attachEvent('onmouseout',myFunction); 
} else { 
    el.onmouseover = myFunction; 
    el.onmouseout = myFunction; 
} 

ref: http://jquerydojo.blogspot.com/2012/12/javascript-dom-addeventlistener-and.html

Answer 7

Alguien anteriormente mencionado que ".. en objetos de eventos de IE no tienen una propiedad de destino: el equivalente es srcElemento ..." Pues bien, en IE11 no es tal objetivo.