2013-01-05 63 views
10

有誰知道jQuery的.on()方法可以在原生JS中實現嗎? 「addEventListener」方法不採用子/選擇器元素作爲過濾的方式,我不認爲我有適當的冒泡/捕獲知識來完全理解那裏發生的事情。我在event.js中查詢過源代碼,看起來最終addEventListener的使用方式與以前一樣,但我不確定是否對源代碼非常滿意。原生addEventListener與選擇器像jQuery中的.on()

如果本機方法沒有提供利用冒泡和捕獲的機制,那麼jQuery .on()函數是否真的有什麼好處,還是隻是讓它看起來像這樣?我的印象是,

.on('parent', '.child', fn(){}); 

比分別安裝每個事件給所有的孩子更高效之下,但是從我的來源解釋,這是很難說,如果jQuery是莫名其妙地管理這種在某種程度上導致性能改進,還是僅僅爲了可讀性。

是否有一個標準的方法來實現父母的事件,利用它的子元素的冒泡/捕獲階段,而不必爲每個孩子附加一個事件?

+2

如果你不明白'.on()'是如何工作的,那麼我懷疑你實際上可以判斷它的性能 – Alexander

+3

要了解你需要了解的所有事件:http://www.quirksmode.org/ JS/introevents.html。關於你的問題:你想要什麼叫*事件代表團*,其實很簡單。將一個偶處理程序附加到任何父級,並檢查目標節點('event.target')是否滿足您的條件。 –

+2

*相關:* [什麼是DOM事件委託?](http://stackoverflow.com/questions/1687296/what-is-dom-event-delegation)。 –

回答

11

來執行事件本身代表團:

parent.addEventListener('click', function(e) { 
    if(e.target.classList.contains('myclass')) { 
     // this code will be executed only when elements with class 
     // 'myclass' are clicked on 
    } 
}); 

你指的是效率與你有多少事件處理程序添加到做到。想象一下有100行的桌子。將單個事件處理程序附加到表格元素,然後將「委派」到每行而不是附加100個事件處理程序(每行1個)效率更高。

事件委託的工作原因是因爲點擊事件實際上觸發了子對象和父對象(因爲您正在點擊父對象內的區域)。上面的代碼片段觸發父級的單擊事件,但只有當條件對事件目標返回true時纔會執行,從而模擬直接附加的事件處理程序。

冒泡/捕捉是一個相關的問題,但是如果多個事件處理程序的啓動順序很重要,您只需要擔心它。如果您有興趣瞭解冒泡vs捕捉,我建議您閱讀event order

事件委託最常見的好處是它處理附加事件處理程序後添加到DOM的新元素。以點擊處理程序的100行的表格爲例。如果我們使用直接事件處理程序附件(100個事件處理程序),那麼添加的新行將需要手動添加事件處理程序。如果我們使用委託事件,那麼新行將自動'擁有'事件處理程序,因爲它在技術上已被添加到父項中,以便選擇所有未來事件。正如Felix Kling建議的那樣閱讀What is DOM Event Delegation,以獲取更多信息。

+0

這將無意中選擇名稱類「.myclass2」等。 –

+1

良好的捕獲。我所說的其他一切都應該是相關的。如果(e.target.classList.contains(」。MyClass的 ')) ''' –

+0

condintial可以rewrited到 ''' :' .myclass'必須是 'MyClass的'(不能改變因爲它只是一個字符變化) –