JavaScript/jQuery eventListener - 在window.onload之外聲明

jQuery如何實現在自調用函數中聲明一個事件偵聽器而不在window.onload中，而JavaScript返回null。JavaScript/jQuery eventListener - 在window.onload之外聲明

(function() { 
    // returns null 
    document.querySelector('#backtotop').addEventListener(self.scrollTop, false); 

    window.onload = function() { 
    // attaches event correctly 
    document.querySelector('#backtotop').addEventListener(self.scrollTop, false); 
    }; 
})();

來源

2014-03-27 Jeff Lupinski

jQuery不會在自我調用函數中執行此操作。你用'$（function（）{...}）'語法混淆了這個嗎？這是'$（document）.ready（function（）{...}）的快捷方式' –

[jQuery的「文檔準備好」功能如何工作的可能的重複？]（http://stackoverflow.com/questions/5959194/how-do-jquerys-document-ready-function-work）它只是簡單地綁定一個處理程序，當主體使用當前瀏覽器中可用的任何方法加載時運行。 –

這被稱爲事件委託。這個想法是將事件綁定到其中一個父節點，並從事件冒泡中受益。例如，您將cam事件綁定到body標籤：

document.body.addEventListener('click', function(e) { 
    if (e.target.id == 'backtotop') { 
     self.scrollTop(); 
    } 
}, false);

您需要在事件處理程序中過濾必要的目標。

在這種情況下，在事件初始化時不需要#backtotop在DOM中可用。

來源

2014-03-27 21:27:55 dfsq

他真的不是在問代表團。問題顯示'window.onload'處理程序成功綁定。那裏沒有代表團。但無論如何它值得了解。 –

我認爲OP實際上是問如何在不使用'window.onload'的情況下在節點不可用時綁定事件（'//返回null'）（當DOM已經呈現並且/ /附加了事件正確「）。 – dfsq

正確，但DOM準備就緒時，問題中的節點可用。它不會在稍後動態添加。 jQuery不使用'window.onload'，他似乎用簡寫的'.ready（）'語法來混合IIFE語法。無論如何，就像我說的那樣，代表團值得了解，儘管像jQuery那樣，你需要測試從'event.target'的所有祖先元素直到'document'來查看是否找到匹配。 –

JavaScript/jQuery eventListener - 在window.onload之外聲明

回答

相關問題