Is there a way to trigger handlers on children of an event target?

Question

Given the code:

var event = new Event('build');

// Listen for the event.
elem.children[0].addEventListener('build', function (e) { ... }, false);

// Dispatch the event.
elem.dispatchEvent(event);

The child element's handler is not invoked. See https://jsfiddle.net/mvjh7700/

Is there a way to invoke the handler without dispatching the event directly on the child (or its descendants)? In my real use case, all sorts of elements (that are descendants, not direct children) listen to the build event, and I don't know exactly which (and don't wish to mark them with a class).

Alternatively, for my use case, it would be OK if I could find all the elements that have handlers on 'build', then I can invoke the event on each. But still, I would like to know the answer to the original question

If I change the build event to click event it works. So my guess is that the event you attach is not working. If you can use jQuery or any other library save yourself the time. — Stanimir Dimitrov, Jul 03 '15 at 15:51
Add event listener on parent elem and dispatch event to all children... as you dispatch event to parent without event handler by it. — Anton Y. Reuchenko, Jul 03 '15 at 15:58
Duplication of http://stackoverflow.com/questions/12503911/how-can-the-children-listen-capture-to-the-parents-event — , Jul 03 '15 at 16:28
@AlexanderMadyuskin That seems to be duplicate but doesn't provide an answer in vanilla javascript. — Bhojendra Rauniyar, Jul 03 '15 at 16:31

Stanimir Dimitrov · Answer 1 · 2015-07-03T16:28:53.857

-1

Here you go a working example. https://jsfiddle.net/mvjh7700/4/

<div id="target">
    <div id="child">hi</div>
</div>

var theParent = document.getElementById('target');
var childElement = theParent.children[0];

childElement.addEventListener('build', doSomething, false);

function doSomething(e) {
    var clickedItem = e.target.id;
    alert("Hello " + clickedItem);
}
var myEvent = new CustomEvent("build", {
    detail: {
        username: "stanimir"
    },
});

childElement.dispatchEvent(myEvent);

edited Jul 03 '15 at 16:28

answered Jul 03 '15 at 16:10

Stanimir Dimitrov

1,872
2
20
25

Fixed the code. Enjoy! The problem was that the custom event was still attached at the parent element. – Stanimir Dimitrov Jul 03 '15 at 16:29
5

This isn't what I asked. You dispatch the event on childElement, which means it is the target. Like I wrote, I have several children and it is hard to find which I need to trigger on. Besides, with your example, I can just call 'doSomething' on the child element directly. The point of events is to promote loose coupling. – IttayD Jul 03 '15 at 19:06

Is there a way to trigger handlers on children of an event target?

1 Answers1