其他元素不聽CustomEvent

我有一個按鈕。點擊此按鈕後，它將發送自定義事件customClick。所以我想要其他DOM元素（如輸入）來偵聽此自定義事件。

但輸入不聽。只有調度事件纔會收聽customClick的按鈕。

我做錯了什麼？我怎樣才能讓input元素聽customClick事件？


 
var button = document.getElementById('customClick'); 
 
button.addEventListener('click', function(e){ 
 
    var clickedButton = e.currentTarget; 
 
    var newEvent = new CustomEvent("customClick"); 
 
    
 
    //console.log(newEvent); 
 
    clickedButton.dispatchEvent(newEvent); 
 
}) 
 

 

 
button.addEventListener('customClick', function(e){ 
 

 
    alert('button listening customClick'); 
 
}) 
 

 

 
var input = document.getElementById('input'); 
 
    input.addEventListener('customClick', function(e){ 
 

 
    alert('input listening customClick'); 
 
})

<button id="customClick">custom click</button> 
 
<input id="input" type="text" />

來源

2017-07-08 Mantas Čekanauskas

你想輸入對事件作出反應上的按鈕啓動嗎？如果是這樣，您需要一個共同的父母來「捕捉」事件。請參閱冒泡vs捕獲：https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-ampaged –

按鈕和輸入是相鄰的兄弟姐妹，你有很多選項可供你使用。他們並不都涉及傾聽自定義事件的輸入（女巫是矯枉過正的，順便說一句）。一旦customClick被觸發，輸入究竟會做什麼？無論您想要調用它，它仍然是一個點擊，除非這個customClick **不會**涉及用戶點擊一個元素......？ – zer00ne

你所擁有的設置，您將需要dispatchEvent到input，有：

input.dispatchEvent(newEvent);

但是，請記住頁面上的任何元素都可以選擇在按鈕上的原始click事件監聽器內。意思是你可以用`document.querySelectorAll（'input'）等東西來選擇所有input元素。這將消除調度次要事件的需要。

var button = document.getElementById('customClick'); 
 
var input = document.getElementById('input'); 
 
var newEvent = new CustomEvent("customClick"); 
 

 
button.addEventListener('click', function(e) { 
 
    var clickedButton = e.currentTarget; 
 

 
    clickedButton.dispatchEvent(newEvent); 
 
    input.dispatchEvent(newEvent); 
 
}) 
 

 
button.addEventListener('customClick', function(e) { 
 
    alert('button listening customClick'); 
 
}) 
 

 
input.addEventListener('customClick', function(e) { 
 
    alert('input listening customClick'); 
 
})

<button id="customClick">custom click</button> 
 
<input id="input" type="text" />

一個更好的方式來處理這個問題，可能的話，將是對customClick監聽事件附加到window對象，而不是具體的input。就像這樣：

var button = document.getElementById('customClick'); 
 
var input = document.getElementById('input'); 
 
var newEvent = new CustomEvent("customButtonClick"); 
 

 
button.addEventListener('click', function(e) { 
 
    var clickedButton = e.currentTarget; 
 

 
    window.dispatchEvent(newEvent); 
 

 
    // Any element on the page can be accessed in here. For example, 
 
    // document.querySelectorAll('input') would select all `input` 
 
    // elements. 
 
}) 
 

 

 
window.addEventListener('customButtonClick', function(e) { 
 
    alert('button listening customClick'); 
 
    
 
    // and access the input using `document.getElementById('input') 
 
    // in here. However, you could just access the `input` within 
 
    // the original button `click` event. 
 
})

<button id="customClick">custom click</button> 
 
<input id="input" type="text" />

來源

2017-07-08 13:18:09

但事情是，我不這些輸入元素。它們是動態創建的。它也可以是標籤標籤。所以我應該跟蹤他們在數組中的某個地方，然後只是循環這個數組並調度** customButtonClick **與數組中的所有項目？ –

我添加了另一個片段，顯示瞭如何將事件附加到'window'對象，這聽起來像對您的情況可能更好。 –

因此，據我所知，如果他們從另一個元素中分離出來，我不能直接聽自定義事件？ –

其他元素不聽CustomEvent

回答

相關問題