正確綁定javascript事件

Question

我正在尋找最合適有效的方法來綁定javascript事件 ; 特別是onload事件（我希望在頁面和所有元素（如圖像加載） 之后發生事件）。 我知道在jQuery中有簡單的方法可以做到這一點，但我想要更高效的原始javascript方法。

Answer 1

有兩種不同的方法可以做到這一點。 只有一個會起作用; 哪一個取決於瀏覽器。 這是一個使用兩者的實用方法：

function bindEvent(element, type, handler) {
   if(element.addEventListener) {
      element.addEventListener(type, handler, false);
   } else {
      element.attachEvent('on'+type, handler);
   }
}

在你的情況下：

bindEvent(window, 'load', function() {
    // all elements such as images are loaded here
});

Answer 2

我知道你只詢問如何綁定事件。 但是Ooooo男孩的樂趣並沒有就此結束。 獲得這個正確的跨瀏覽器還有很多東西，而不僅僅是初始綁定。

@ d。的答案對於您正在尋找的window load事件的特定情況就足夠了。 但它可能會讓新手讀者對您的代碼產生錯誤的“正確”感。 僅僅因為你綁定了這個事件並不意味着你要注意將它標准化。 你可能剛剛殺青的更好window.onload ：

window.onload = (function(onload) {
  return function(event) {
    onload && onload(event);

    // now do your thing here
  }
}(window.onload))

但是對於事件綁定的一般情況，@ d。的答案遠非令人滿意而令人沮喪。 關於它唯一正確的做法是使用特征檢測而不是瀏覽器檢測。

不要在這里進行太多的咆哮，但JavaScript事件綁定可能是使用JavaScript庫的首要原因。 我不關心它是哪一個，其他人一遍又一遍地解決了這個問題。 以下是處理器函數內部的自釀實現中的問題：

• 如何獲取event對象本身？
• 如何阻止事件的默認操作（例如，單擊鏈接但不導航）
• 為什么this指向window對象？
• （重新鼠標事件）事件的x / y坐標是什么？
• 哪個鼠標按鈕觸發了事件？
• 它是按住Ctrl鍵單擊還是只是常規點擊？
• 實際觸發的事件是什么元素？
• 什么因素是事件去 ？ （即relatedTarget ，比如說blur ）
• 如何通過其父DOM取消事件的冒泡？
• （Re event bubbling）現在實際接收事件的元素是什么？ （即currentTarget ）
• 為什么我不能從這個keydown事件中得到怪異的char代碼？
• 當我添加所有這些事件處理程序時，為什么我的頁面會泄漏內存？ 哎呀！
• 為什么我不能解除我之前綁定的匿名函數？

而這樣的例子不勝枚舉...

在這些日子里推出自己的唯一理由是學習。 那沒關系。 不過，請閱讀PPK的瀏覽器事件簡介 。 看看jQuery源代碼 。 看看Prototype源碼 。 你不會后悔的。

Answer 3

這樣的事情

window.onload = (function(onload) {
    return function(event) {
        onload && onload(event);

        $(".loading-overlay .spinner").fadeOut(300),
            $(".loading-overlay").fadeOut(300);
            $("body").css({
                overflow: "auto",
                height: "auto",
                position: "relative"
            })
    }
}(window.onload));

Answer 4

window.onload = function() {
   // ...
};