attachEvent rispetto addEventListener

Question

Ho problemi a far funzionare attachEvent. In tutti i browser che supportano il gestore addEventListener il codice seguente funziona come un incantesimo, ma in IE è un disastro completo. Hanno una loro variazione (incompleta) chiamata attachEvent.

Ora ecco l'affare. Come faccio a far funzionare attachEvent allo stesso modo di addEventListener?

Ecco il codice:

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); 
    } 
} 

Questa chiama la funzione KeyBoardHandler che assomiglia a questo:

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

    /* more code */ 
} 

Non voglio usare qualsiasi framework perché a) sto cercando di imparare e capire qualcosa, e B) qualsiasi struttura è solo un sovraccarico di codice che userò.

Qualsiasi aiuto è molto apprezzato!

Answer 1

È preferibile utilizzare un framework JavaScript come MooTools o jQuery di propria scelta per facilitare il supporto di più browser. Per maggiori dettagli, si veda anche

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

porto MooTools di parti del codice di esempio:

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); 

Tra l'altro, è apposta che si utilizza sia idname e this.idname nel codice sopra?

Answer 2

Basta usare un framework come jQuery o prototipo. Ecco a cosa servono, questo preciso motivo: essere in grado di fare questo genere di cose senza preoccuparsi della compatibilità cross-browser. E 'super facile da installare ... basta includere uno script js e aggiungere una riga di codice ...

(a cura solo per voi Crescent Fresh)

Con un quadro, il codice è semplice come. ..

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

Answer 3

Ecco una funzione che uso per entrambi i browser:

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); 
    } 
} 

E si può utilizzare come:

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

Answer 4

Diversi browser elaboreranno gli eventi in modo diverso. Alcuni browser hanno bolle di eventi su come lanciare i controlli dove alcuni vanno in alto. Per ulteriori informazioni su che dare un'occhiata a questo documento W3C: http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Per quanto riguarda questa impostazione del parametro "userCapture" false per addEventListener problema specifico farà eventi comportano allo stesso modo di Internet Explorer: https://developer.mozilla.org/en/DOM/element.addEventListener#Internet_Explorer

Answer 5

Il la fonte dei tuoi problemi è la funzione KeyBoardHandler.Nello specifico, in IE Event gli oggetti non hanno una proprietà target: l'equivalente è srcElement. Inoltre, la proprietà returnValue degli oggetti Event è solo IE. Vuoi il metodo preventDefault() in altri browser.

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

Ecco come fare questo lavoro cross-browser, solo per riferimento però.

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

Qualcuno di cui sopra che ".. in oggetti evento IE non hanno una proprietà target: l'equivalente è srcElement ..." Beh, in IE11 non v'è tale destinazione.