正確綁定javascript事件

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

來源

2009-11-25 Jackie

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

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

來源

2009-11-25 10:59:13

非常感謝你。非常徹底，正是我期待的！ – Jackie 2009-11-25 11:03:23

@Jackie：樂趣並沒有在這裏結束。看到我的答案。 – 2009-11-25 13:42:19

事件本身是一個依賴關係，可以通過理解DOM來避免大部分事件。 DOM以從上到下的方式加載;較靠近文檔頂部的項目加載較早，而項目稍後加載。通過在文檔的末尾加載具有DOM依賴關係的腳本，很多這些問題都可以在沒有事件綁定的情況下得到緩解。把事情簡單化。 – augurone 2014-10-08 17:04:20

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

來源

2009-11-25 10:58:58

謝謝你，這是一個好太:) – Jackie 2009-11-25 11:03:53

我知道你只是詢問如何綁定事件。但是Ooooo男孩的樂趣並不止於此。跨越瀏覽器而不僅僅是初始綁定還有很多。

@ d。的回答對於您正在查找的load事件的load事件的具體情況就足夠了。但是它可能會讓新手的代碼錯誤地認識到「正確」。僅僅因爲你約束了事件並不意味着你會照顧到正常化。您可能是更好的只是固定window.onload：

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

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

但對於事件的結合@ d一般情況下的答案是令人滿意的，只要是令人沮喪的。關於它唯一正確的做法是使用功能檢測而不是瀏覽器檢測。

不要在這裏發表太多的咆哮，但JavaScript事件綁定可能是＃1與JavaScript庫一起去的理由。我不在乎它是哪一個，其他人一遍又一遍地解決了這個問題。這裏是您的處理函數中一次自制實現的問題：

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

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

唯一的好理由推出自己這些天的學習。這很好。不過，請閱讀PPK的Intro to browser events。看看jQuery source。看看Prototype source。你不會後悔的。

來源

2009-11-25 12:51:46

有趣的帖子。 – 2009-12-06 19:09:45

有些情況下加載一個**庫**或** framewo rk **是不切實際的，並且由於許多原因而過量（早期與晚期加載，「簡單功能」的js膨脹，...）。 – augurone 2014-10-23 18:33:10

類似的東西

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

來源

2016-11-30 07:18:26 Bipon

正確綁定javascript事件

回答

相關問題