優先級嵌套事件

考慮這個片斷：優先級嵌套事件

<div onkeypress="console.log('parent');"> 
    <input type="text" onkeypress="console.log('child');"> 
</div>

兩個嵌套的元素都與一個onkeypress事件-event。當我將光標放在輸入的結果中並敲擊鍵盤上的某個鍵時，我得到

child 
parent

以該順序記錄到控制檯。我的問題是，如果我能指望它總是按照這個順序開火。即最內層的元素總是會先發射？

來源

2016-02-18 swelet

這是事件冒泡的一個很好的解釋，你可以期望什麼/控制：HTTP ：//www.quirksmode.org/js/events_order.html也閱讀此：http://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-pturing –

是的，你可以像注意到MDN和W3你可以在最內側的事件計數火災第一，作爲動作冒泡，隨後發生的事件將觸發。瀏覽器認爲按鍵事件有所不同。

從QuirksMode：（從外部向內部捕捉火焰，例如向下箭頭和從內部冒泡到外部，即向上箭頭）。

 Capturing-> | |/\ <-Bubbling 
-----------------| |--| |----------------- 
| element1  | | | |    | 
| -------------| |--| |-----------  | 
| |element2 \/| |   |  | 
| --------------------------------  | 
|  W3C event model     | 
------------------------------------------

使用事件偵聽器，您可以指定捕獲vs冒泡與第三個參數。

element1.addEventListener('keypress',myScript,true) // Capture element1.addEventListener('keypress',myScript,false) // Bubble*default

object.addEventListener("keypress", myScript, false); == <div onkeypress="myScript()">

有一點需要注意，IE不遵循相同的模式，但你仍然可以依靠冒泡，即內而外。

來源

2016-02-18 20:06:26

好主意@swelet –

這取決於瀏覽器。但是，您可以通過在元素上放置addEventListener（）來決定執行順序。

本指南解釋了它在走向深沉： http://www.quirksmode.org/js/events_order.html

來源

2016-02-18 19:31:15 jozhe

*「這取決於瀏覽器。「* 怎麼會這樣？你能詳細說明嗎？ –

現在，在所有的瀏覽器中，首先捕獲並且冒泡事件。沒有addEventListener（）就會忽略捕獲，將其設置爲true。但它不會爲IE瀏覽器<9工作。所以他不應該依靠默認行爲。 – jozhe

那麼，舊版瀏覽器不支持捕獲的事實並不意味着冒泡在每個瀏覽器中都不起作用:) –

是的。無論你是在html中添加事件處理程序（如你的例子）還是在js文件中。無論您在JavaScript文件中註冊事件處理程序的順序如何，正如Rob & Vinny所解釋的那樣，事件會從元素中「冒泡」。按鍵事件從dom元素輸入開始，然後冒泡到他的父母，以及他父母的父母，等等。因此，事件處理程序將以相同的順序觸發。

這就是你需要知道的一切嗎？如果您對這兩個獨立的處理程序有特定的用例，那麼您可以解釋它是什麼，並且我可以嘗試編寫解決方案，因爲在您的示例中，我無法看到如何在同一事件上執行兩個操作相同的元素。

編輯：那麼爲什麼不使用文檔的全局偵聽器與檢查如果焦點上的元素是輸入？

Example on JSFiddle：

document.addEventListener('keypress', function(e){ 
    var key = String.fromCharCode(e.which), 
     targetElt = e.target; 

    if (key === 'a'){ 
    console.log('-- Action when "a" is pressed') 
    if (targetElt.nodeName === 'INPUT') { 
     console.log('-- Action when "a" is pressed and the focus is on an input'); 
    } 
    } 
}, false);

如果按 'A' 僅第一console.log被調用時，如果按 'A' 時，input集中，既console.log被調用。

如果您有多個按鍵，我會建議使用switch語句，而不是if/else if/else

感謝

來源

2016-02-18 23:03:22 OxyDesign

好的謝謝。這是一個虛擬的例子，我實際上在React中工作，而問題源於想要擁有一些全局鍵盤shorctut，其中一些具有增加的行爲，如果特定的元素聚焦。 Vinny還表示冒泡是這種方式的標準行爲。 – swelet

我用一個例子編輯了我的答案。這是你所期望的嗎？ – OxyDesign

優先級嵌套事件

回答

相關問題