Question

我需要纯Javascript中的CrossBrowser-EventListener。

在互联网上，我发现了以下两个版本。

哪一个是正确/更好的？

有人可以解释一下SECOND版本吗？

（特别是这段我不清楚：event_function.call（html_element）;

版本1：

function AddEvent(html_element, event_name, event_function) 
{       
   if(html_element.attachEvent) //Internet Explorer
      html_element.attachEvent("on" + event_name, event_function); 
   else if(html_element.addEventListener) // Everything else
      html_element.addEventListener(event_name, event_function, false);
}

版本2：

function AddEvent(html_element, event_name, event_function) 
{       
   if(html_element.attachEvent) //Internet Explorer
      html_element.attachEvent("on" + event_name, function() { event_function.call(html_element); }); //<-- This I don't understand
   else if(html_element.addEventListener) // Everything else
      html_element.addEventListener(event_name, event_function, false);
}

Answer 1

前言：所有现代浏览器都支持addEventListener，甚至是IE9 +，但需要注意的是IE9-IE11默认情况下会通过Intranet上的（in）兼容模式阻塞自己（我认为））在其他一些情况下。您可以通过从服务器发送X-UA-Compatible标头或将其作为meta标记包含在开头，告诉IE9-IE11 不自行蹒跚 head 。（This answer声称您实际上必须从服务器发送它，但我认为这是不正确的;只是如果您将meta标记进一步降低，IE可能会忽略除非你需要支持IE8，否则你可能不再需要跨浏览器了。

他们都没有彻底规范事件处理程序处理的内容。

您需要处理的差异是：

调用处理程序时this的值
event对象来自
event对象

您不理解的部分：

html_element.attachEvent("on" + event_name, function() { event_function.call(html_element); }); //<-- This I don't understand

...正在尝试处理第一个问题，即回调中this的值。 Function#call调用一个函数，允许您在调用期间设置this的特定值。因此event_function.call(html_element)调用event_function this等于html_element。

有些时候，对于this answer，我写了一篇相当彻底的文章：

var hookEvent = (function() {
    var div;

    // The function we use on standard-compliant browsers
    function standardHookEvent(element, eventName, handler) {
        element.addEventListener(eventName, handler, false);
        return element;
    }

    // The function we use on browsers with the previous Microsoft-specific mechanism
    function oldIEHookEvent(element, eventName, handler) {
        element.attachEvent("on" + eventName, function(e) {
            e = e || window.event;
            e.preventDefault = oldIEPreventDefault;
            e.stopPropagation = oldIEStopPropagation;
            handler.call(element, e);
        });
        return element;
    }

    // Polyfill for preventDefault on old IE
    function oldIEPreventDefault() {
        this.returnValue = false;
    }

    // Polyfill for stopPropagation on old IE
    function oldIEStopPropagation() {
        this.cancelBubble = true;
    }

    // Return the appropriate function; we don't rely on document.body
    // here just in case someone wants to use this within the head
    div = document.createElement('div');
    if (div.addEventListener) {
        div = undefined;
        return standardHookEvent;
    }
    if (div.attachEvent) {
        div = undefined;
        return oldIEHookEvent;
    }
    throw "Neither modern event mechanism (addEventListener nor attachEvent) is supported by this browser.";
})();

然后你在你的例子中使用它：

hookEvent(document.getElementById("hd_vertical"), "click", function(e) {
    // ...
});

哪个Cross-Browser-EventListener是正确的（纯Javascript）

1 个答案: