Other elements does not listening to CustomEvent

Question

This is simplified problem I am facing.

I have a button. When this button is clicked it will dispatch custom event customClick. So I want other DOM elements, like input, to listen for this custom events.

But input does not listen. Only button which dispatch event would listen to customClick.

What I am doing wrong? How can I make input element listen to customClick event?

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

You want an input to respond to an event fired on a button? If so, you need a common parent to 'capture' the event, instead. See bubbling vs capture: https://stackoverflow.com/questions/4616694/what-is-event-bubbling-and-capturing — Lee Kowalkowski, Jul 08 '17 at 13:09
The button and input are adjacent siblings, you have many options available to you. They don't all involve the input listening for a custom event (witch is overkill, BTW). What exactly will the input do once a customClick is fired? No matter what you want to call it, it's still a click, unless of course this customClick **doesn't** involve the user clicking an element...? — zer00ne, Jul 08 '17 at 14:24

Brett DeWoody · Answer 1 · 2017-07-08T13:38:19.880

With the setup you have, you would need to dispatchEvent to the input, with:

input.dispatchEvent(newEvent);

However, keep in mind any element on the page can be selected within the original click event listener on the button. Meaning you could select all input elements with something like `document.querySelectorAll('input'). This would eliminate the need for dispatching a secondary event.

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

A better way to handle this, possibly, would be to attach the customClick listener event to the window object instead of the specific input. Like this:

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

but the thing is, that i don't these input element. They are created dynamically. It can be label tag as well. so should I keep track off them somewhere in array, and then just loop this array and dispatch **customButtonClick** with all items in array? — Mantas Čekanauskas, Jul 08 '17 at 13:24
I added another snippet showing how the event can be attached to the `window` object, which sounds like it might be better for your situation. — Brett DeWoody, Jul 08 '17 at 13:27
So as I nderstand, i cannot listen to custom events directly, if they are diapached from another element? — Mantas Čekanauskas, Jul 08 '17 at 13:43
When an event is dispatched it has to be dispatched to an element, which can be a specific element, or the `window` object. Then a listener needs to be setup on the element or `window`. — Brett DeWoody, Jul 08 '17 at 13:47
Sounds like this is more complicated than it needs to be. Can you explain what you're trying to do? There might be a simpler solution. — Brett DeWoody, Jul 08 '17 at 13:48

Other elements does not listening to CustomEvent

1 Answers1