添加事件侦听器跨浏览器

IT技术 javascript events
2021-02-28 21:02:32

我的问题在这里：为什么这段代码不起作用？？？？...消息没有出现

我正在尝试在事件单击时将事件侦听器添加到元素 x 

    function test()
    {
    alert("test");
    }

var EventsCrossBrowsers = 
 {
    addEvents:(function(element,event,func)
              {
                    if(element.addEventListener)
                    {
                        return elemenet.addEventListener(event,func,false);
                    }
                    else if(elemenet.attachEvent)
                    {
                        return elemenet.attachEvent("on"+event,func);
                    }
              }());
 }

 var x =document.getElementById("test");

EventsCrossBrowsers.addEvents(x,"click",test);

非常感谢 jfriend00 .... 我认为最简单的方式：-

function test()
{
    alert("test");
}

function addEventsCrossBrowsers(elemenet,event,func)
{
    if(elemenet.addEventListener)
    {
        elemenet.addEventListener(event,func,false);
    }
    else if(elemenet.attachEvent)
    {
        elemenet.attachEvent("on"+event,func);
    }
}
var x =document.getElementById("test");
addEventsCrossBrowsers(x,"click",test);

您的第二种方式几乎相同，只是我不明白返回...再次感谢...

1个回答

在您的函数中，我看到您同时使用了两者elemenet，element并且它们的拼写应该相同。那至少是问题的一部分。

我还看到您的addEvents函数是一个自执行函数，在这方面没有意义。看起来它应该只是一个正常的功能。

这是我的跨浏览器事件功能。除了创建一个用于添加事件处理程序的函数外，它还规范了this指针和events对象，以便它们在任何浏览器中也可以被相同地对待。

// add event cross browser
function addEvent(elem, event, fn) {
    // avoid memory overhead of new anonymous functions for every event handler that's installed
    // by using local functions
    function listenHandler(e) {
        var ret = fn.apply(this, arguments);
        if (ret === false) {
            e.stopPropagation();
            e.preventDefault();
        }
        return(ret);
    }

    function attachHandler() {
        // set the this pointer same as addEventListener when fn is called
        // and make sure the event is passed to the fn also so that works the same too
        var ret = fn.call(elem, window.event);   
        if (ret === false) {
            window.event.returnValue = false;
            window.event.cancelBubble = true;
        }
        return(ret);
    }

    if (elem.addEventListener) {
        elem.addEventListener(event, listenHandler, false);
        return {elem: elem, handler: listenHandler, event: event};
    } else {
        elem.attachEvent("on" + event, attachHandler);
        return {elem: elem, handler: attachHandler, event: event};
    }
}

function removeEvent(token) {
    if (token.elem.removeEventListener) {
        token.elem.removeEventListener(token.event, token.handler);
    } else {
        token.elem.detachEvent("on" + token.event, token.handler);
    }
}

如果你想不传播和预防的默认选择，但有一个简单的版本this和event正常化，这将是这样的：

// add event cross browser
function addEvent(elem, event, fn) {
    if (elem.addEventListener) {
        elem.addEventListener(event, fn, false);
    } else {
        elem.attachEvent("on" + event, function() {
            // set the this pointer same as addEventListener when fn is called
            return(fn.call(elem, window.event));   
        });
    }
}
@jfriend00 感谢您的代码。您将如何取消订阅事件监听？
2021-05-03 21:02:32
它工作得很好，我终于明白什么是 stopPropagation() 和 cancelBubble() 真的...谢谢 aloooooot...jfriend00
2021-05-05 21:02:32
抱歉，我看不懂你的代码 function listenHandler(e) { var ret = fn.apply(this, arguments); if (ret === false) { e.stopPropagation(); e.preventDefault(); 返回（返回）；}
2021-05-11 21:02:32
@MohamedMahmoudZaki - 这个事件处理抽象添加了一个功能，如果事件处理函数返回false，那么它将停止传播和事件的默认处理。如果事件处理程序不返回 false 或不返回任何内容，则它会跳过该行为。由于旧版 IE 中的传播和默认行为不同，因此对此进行抽象也很有用。
2021-05-12 21:02:32
@MohamedMahmoudZaki - 我已经在您的代码中为您提供了几个错误。另外，请不要在注释中放置多行代码。它是完全不可读的。如果您需要交流多行代码，请使用该edit链接并将其添加到您的问题中，然后添加一条与您添加的代码相关的注释。如果您不熟悉 javascript，为什么不直接使用我已经可以使用的两个事件处理函数之一呢？
2021-05-13 21:02:32
其它你可能感兴趣的问题
上一篇使用 Javascript 获取画布中的最大字体大小 下一篇覆盖 Javascript 中的等价比较