Autres éléments n'écoutant pas CustomEvent

Question

Ce problème est simplifié.

J'ai un bouton. Lorsque ce bouton est cliqué, il va envoyer l'événement personnalisé customClick. Donc, je veux d'autres éléments DOM, comme l'entrée, pour écouter ces événements personnalisés.

Mais l'entrée n'écoute pas. Seul bouton sur lequel l'événement d'envoi écouterait customClick.

Qu'est-ce que je fais mal? Comment est-ce que je peux faire l'élément d'entrée écoutent l'événement 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

Avec la configuration que vous avez, vous devez dispatchEvent au input, avec:

input.dispatchEvent(newEvent); 

Cependant, gardez à l'esprit tout élément sur la page peut être sélectionnée dans l'écouteur d'événement click d'origine sur le bouton. Cela signifie que vous pouvez sélectionner tous les éléments input avec quelque chose comme `document.querySelectorAll ('input'). Cela éliminerait la nécessité d'envoyer un événement secondaire.

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

Une meilleure façon de gérer cela, peut-être, serait de joindre l'événement auditeur customClick à l'objet window au lieu du input spécifique. Comme ceci:

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