attachEvent versus addEventListener

Question

У меня возникают проблемы с подключением 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 */ 
} 

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

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

Answer 1

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

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

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 в коде выше?

Answer 2

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

(отредактированного только для вас Crescent Fresh)

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

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

Answer 3

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

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) 

Answer 4

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

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

Answer 5

источником ваших проблем является функция KeyBoardHandler.В частности, в IE Event объекты не имеют свойства target: эквивалент srcElement. Кроме того, свойство returnValue объектов Event является IE-only. Вы хотите использовать метод 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 */ 
} 

Answer 6

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

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

исй: http://jquerydojo.blogspot.com/2012/12/javascript-dom-addeventlistener-and.html

Answer 7

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