AttachEvent против addEventListener

У меня возникают проблемы с подключением attachEvent. Во всех браузерах, поддерживающих обработчик addEventListener, приведенный ниже код работает как шарм, но в IE это полная катастрофа. У них есть своя (неполная) вариация, называемая attachEvent.

Теперь вот сделка. Как заставить приложение attachEvent работать так же, как это делает addEventListener?

Здесь код:

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

Это вызывает функцию KeyBoardHandler, которая выглядит так:

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

    /* more code */
}

Я не хочу использовать какие-либо фреймворки, потому что A) Я пытаюсь чему-то научиться и что-то понимаю, а B) любая фреймворк - это просто перегрузка кода, который я буду использовать.

Любая помощь очень ценится!

Ответы

Ответ 1

Здесь, как сделать эту работу кросс-браузером, просто для справки.

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

Ответ 2

Источником ваших проблем является функция KeyBoardHandler. В частности, в IE Event объекты не имеют свойства target: эквивалент srcElement. Кроме того, свойство returnValue объектов Event имеет значение IE. Вы хотите использовать метод preventDefault() в других браузерах.

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 */
}

Ответ 3

Просто используйте фреймворк, например jQuery или прототип. Это то, ради чего они есть, эта точная причина: иметь возможность делать такие вещи, чтобы не беспокоиться о совместимости между браузерами. Он очень прост в установке... просто включите .js script и добавьте строку кода...

(отредактированный только для вас Свежий Полумесяц)

С фреймворком код такой же простой, как...

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

Ответ 4

Вот функция, которую я использую для обоих браузеров:

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

И вы можете использовать его как:

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

Ответ 5

Различные браузеры будут обрабатывать события по-разному. У некоторых браузеров есть пузырь событий, которые бросают элементы управления, когда некоторые спускаются вниз. Для получения дополнительной информации об этом взгляните на этот документ W3C: http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

Как для этой конкретной проблемы установка параметра userCapture на false для addEventListener приведет к тому, что события будут такими же, как Internet Explorer: https://developer.mozilla.org/en/DOM/element.addEventListener#Internet_Explorer

Ответ 6

Вам может быть лучше использовать фреймворк JavaScript, такой как MooTools или jQuery по вашему выбору, чтобы упростить поддержку кросс-браузера. Подробнее см. Также

Порт MooTools частей вашего образца кода:

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

Кстати, специально ли вы используете как idname, так и this.idname в коде выше?

Ответ 7

Кто-то из вышеперечисленных сказал, что ".. в объектах IE события не имеют целевого свойства: эквивалент srcElement..." Ну, в IE11 есть такая цель.