Question

我遇到麻烦让attachEvent工作。在所有支持addEventListener处理程序的浏览器中，下面的代码就像魅力一样，但在IE中是完全的灾难。它们有自己的（不完整的）变体，称为attachEvent。

现在就是这笔交易。如何以与addEventListener相同的方式使attachEvent工作？

以下是代码：

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）任何框架只是我将要使用的代码的重载。

非常感谢任何帮助！

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

参考：http://jquerydojo.blogspot.com/2012/12/javascript-dom-addeventlistener-and.html

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

Answer 3

只需使用jQuery或原型等框架。这就是他们的目的，这个确切的原因：能够做这种事情而不必担心跨浏览器的兼容性。它非常容易安装......只需包含一个.js脚本并添加一行代码......

（仅为您编辑Crescent Fresh）

使用框架，代码就像......一样简单。

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

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

Answer 5

不同的浏览器会以不同方式处理事件。有些浏览器会出现事件冒泡，因为有些浏览器会自上而下。有关这方面的更多信息，请查看此W3C文档：http://www.w3.org/TR/DOM-Level-3-Events/#event-flow

对于此特定问题，将addEventListener的“userCapture”参数设置为false将使事件的行为与Internet Explorer相同：https://developer.mozilla.org/en/DOM/element.addEventListener#Internet_Explorer

Answer 6

您可能最好使用自己选择的MooTools或jQuery等JavaScript框架来简化跨浏览器支持。有关详细信息，请参阅

示例代码部分的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？

attachEvent与addEventListener

6 个答案: