他の要素はCustomEventを聞いていません

Question

これは私が直面している単純な問題です。

ボタンがあります。このボタンをクリックすると、カスタムイベントcustomClickが送出されます。ですから、他のDOM要素（inputなど）がこのカスタムイベントをリッスンするようにします。

しかし、入力は聞きません。イベントを送出するボタンだけがcustomClickを聞いていました。

私は間違っていますか？入力要素を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" />

Answer 1

、あなたが、inputにdispatchEventに必要になります。しかし、心に留めておくページ上の任意の要素を選択することができ

input.dispatchEvent(newEvent); 

ボタン内の元のclickイベントリスナー内。つまり、すべてのinput要素を `document.querySelectorAll（ '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" />

これを処理するためのより良い方法、おそらく、代わりに特定の inputの window対象に customClickリスナーイベントを添付することです。このように：

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" />