Vanilla JS event delegation (NOT A CLICK EVENT) that returns more than the document object

Question

I have been trying to figure out a good way to replicate the following code as vanilla JS without currying inside a document event listener. What is the way to make the following code below into a vanilla js event listener.

$(document).on('click', 'myElement', function(){
    //do something to myElement
});

Is there something like the above that would be similar to the below in theory

document.addEventListener('click', function(event) {
   if(event.target){
     // do something to myElement
   }
});

Please go to Vanilla JS event delegation (NOT A CLICK EVENT) that returns more than the document object for the second part of accepted answer below.

The "dupicate" notice attached to this is not the same as my question. It is similar but the delegation is completely different. Be weary of the notice above. I just could of worded this better. — NicholasByDesign, Aug 13 '16 at 02:48
To be completely honest, your current question is exactly the same as the duplicated (the way it is worded right now). Judging by the accepted answer, your question was "How can I know the HTML element of `event.target`?". As for future readers that would google this question, the duplicated answer would be better even if it doesn't suits you. Anyway, what matters is that you found your answer! — Karl-André Gagnon, Aug 13 '16 at 16:52
I have updated the question in hopes to clear some things up and unaccepted the answer. To avoid writing another post for duplication, but it really needs to be for the case scenario of something other than a click event, mousemove/mouseenter in this case. Something where the target can not be directly specified. — NicholasByDesign, Aug 15 '16 at 00:23
Reopened the question. As for your answer, use `mouseover` along with Dekel's answer. — Karl-André Gagnon, Aug 15 '16 at 01:22

Dekel · Accepted Answer · 2016-08-15T02:00:32.267

4

Actually what your jquery block does is listening for any click within the document, and when there is a click it checks if the element that was clicked is <myElement>.

You can do the same with a code that is similar to this:

document.addEventListener('click', function(event) {
        if(event.target.nodeName == 'myElement'.toUpperCase()) {
        // do something to myElement
    }
});

Update

To have the answer up-to-date with the change of the question, I added an example to demonstrate the differences between mouseover and mouseenter:

Works much better with snippet in full-screen mode

document.addEventListener('mouseover', function(event) {
    console.log('mouseover '+ event.target.id);
    if(event.target.nodeName == 'myElement'.toUpperCase()) {
        // do something to myElement
    }
});

document.addEventListener('mouseenter', function(event) {
    console.log('mouseenter '+ event.target.id);
    if(event.target.nodeName == 'myElement'.toUpperCase()) {
        // do something to myElement
    }
});

html, body {
  margin: 0;
  padding: 0;
}
div {
  margin: 15px;
  padding: 15px;
  border: 1px dotted blue;
}
body > div {
  margin: 0;
}
div div {
  border-color: red;
}
div div div {
  border-color: green;
}

<div id="outer1"> Outer 1
  <div id="outer2"> Outer 2
    <div id="inner"> Inner </div>
  </div>
</div>

Note that mouseenter event will fire only once (for the document object) while the mouseover event will fire for every change of element within the document (this will happen for every element in the dom tree).

As for jQuery

The way jQuery overcome this behavior to make this

$(document).on('mouseenter', 'myElement',

work, is that they change the mouseenter event to mouseover (on the document) and they do internal checking to see if the event was a mouseover or mouseenter on myElement.

edited Aug 15 '16 at 02:00

answered Aug 12 '16 at 20:00

Dekel

60,707
10
101
129

Hey that is correct, could you possibly expand on something for me though. Say it is not a click event but a mouseenter. How would you delegate that without the event just returning the document? I probably should of put that in my example. But as far as the question your answer is correct. – NicholasByDesign Aug 12 '16 at 20:34
@NicholasByDesign, is there a reason for un- accpeting my answer here? – Dekel Aug 15 '16 at 00:38
Yes, it was technically correct to my situation that I had originally posted it was not what I had intended, along with some debate with admins on duplicates. I updated my question to be more specific. Sorry for the inconvenience. – NicholasByDesign Aug 15 '16 at 01:12
1

@NicholasByDesign Then you should roll back your edit and accept this answer, but ask a new, separate question (possibly with a link back to this one if you want to refer to it). It is not fair to the answerers for you to edit your question so that their answers are no longer relevant. – Paul Aug 15 '16 at 01:30
@Paulpro Totally agree with you, but then again, this answer is still the good one if he explain the difference between `mouseover` and `mouseenter`. I'd definitely go for that since the "duplicate" would only be noise... Anyway, i gave him an upvote so he as a -5 instead of -15 :) – Karl-André Gagnon Aug 15 '16 at 01:35
Answer updated with an example and explanation for how to work with `mouseover` and `mouseenter` – Dekel Aug 15 '16 at 02:01
Please visit here if you want to submit your answer for the mouseenter/mousemove portion http://stackoverflow.com/questions/38925544/vanilla-js-event-delegation-not-a-click-event-that-returns-more-than-the-docum – NicholasByDesign Aug 15 '16 at 17:03
Your link is to this question. You sure this is what you meant? – Dekel Aug 15 '16 at 17:08
to expand the usage of this sample code, you can also add inside the condition `.matches()` like so `if ( event.target.matches( 'myElement' ) )` the benefit of doing it this way is that inside matches you can pass anything you'd pass in `.querySelector()` such as `div.ClassName#Id[attr]` – Anton Kastritskiy Feb 03 '17 at 21:09

score -2 · Answer 2 · answered Aug 12 '16 at 19:56

-2

Here is a solution using plain JavaScript:

document.getElementById("someId").addEventListener("click", doSomething);

function doSomething() {
    // whatever you like...
}

answered Aug 12 '16 at 19:56

Steve

1,553
2
20
29

1

It's not equivalent. `on` will re-apply the event listener to any new elements that are added under the selector – VLAZ Aug 12 '16 at 19:57
I see... maybe this solution suffices anyway when he is not adding new elements dynamically. – Steve Aug 12 '16 at 20:02

Vanilla JS event delegation (NOT A CLICK EVENT) that returns more than the document object

2 Answers2

Update