Earlier quoted context omitted.
I have an example to which maybe you or someone else can suggest a better 'vanilla' solution. Would love to hear suggestions. With jQuery I'd often do $( ).on('click', , callback); crucially, because events bubble up, even a click on a child element of will register as a click on the target element. in plain js it doesn't seem to work that way. I'd do .addEventListener(), but I'd run into the problem that the event.t…
Not completely sure what you mean. Could you make a minimal example on jsfiddle? Then I can make the vanilla counterpart and we can compare.
Sorry, no time right now for that. I'll try to explain more clearly. There's no problem if I can bind directly to the element. However, that's often not possible. Imagine a element that is initialized, event listeners and all, but only receives data ( elements) at a later time.
In jQuery I can do something like this:
$().on('click', , function(e) {
// using this 'this' gives you the element. Always. Even
// if you click on a child element of . And it works if
// you add or remove items. Also it doesn't add a listener
// to *every* single item, which matters if you've got a whole
// bunch of them!
});
.addEventListener('click', function(e) {
// e.target is the actual element you clicked. So now we need to
// figure out if this element is inside an , and perhaps
// also *which* . There's various approaches, and it's
// not rocket science, but it's all extra work for something that
// seems like a common scenario.
});