添加事件侦听器跨浏览器 [英] adding event listener cross browser

问题描述

我的问题在这里：为什么这个代码不工作...消息没有出现

my problem here:why doesn't this code work ????? ... the message doesn't appear

我正在尝试在事件点击上向元素x添加事件监听器

i'm trying to add event listener to element x on event click

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

谢谢alot jfriend00 ....
最sm ple的方式我想： p>

thanks alot jfriend00.... the most smiple way i think :-

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

你的第二种方式几乎是一样的，除了我不明白的回报... $ b $再次感谢你...

your second way is almost the same except i don't understand the return ... thank you again...

推荐答案

在你的函数中，我看到你正在使用 elemenet 和元素它们应该是相同的拼写。这将是至少部分问题。

In your function, I see you are using both elemenet and element where they should be the same spelling. That would be at least part of the problem.

我也看到你的 addEvents 函数是一个自我执行的功能这在这方面没有意义。似乎这应该只是一个正常的功能。

I also see that your addEvents function is a self executing function which doesn't make sense in this regard. It seems like it should just be a normal function.

这是我的跨浏览器事件功能。除了添加事件处理程序的一个功能之外，它还使此指针和事件对象的规范化，以便他们可以在任何浏览器中也被处理相同。

Here's my cross browser event function. In addition to make one function for adding event handlers, it also normalizes the this pointer and the events object so they can be treated the same in any browser too.

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

如果你想要一个更简单的版本，没有传播和默认预防选项，但是使用这个和事件正常化，那就是这样：

If you want a simpler version without the propagation and default prevention options but with this and event normalization, that would be this:

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

这篇关于添加事件侦听器跨浏览器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！