I kept thinking “don’t repeat yourself” when adding the event handlers. There must be a way to do this in 1 function and check with conditional/switch statements (maybe?) to see which #id with corresponding block of code should be executed.
Events “bubble up” from the bottom to the top level. So, for example, if you were to [say], put an event listener on the <body>, it would “see” all the events underneath it. Google “event delegation” for Javascript.
Though I agree with using event delegation., keep in mind there are drawbacks. ie. say if you were to click a child tag instead,. it would not fire off. You’ll need to use .closest() as well.
Do you mean sibling? Because an event on a child will always be picked up by a parent event handler unless explicitly prevented (eg via stopPropagation)
If you did event delegation on the parent divs,. then when a user clicks on the title or any child tag inside of parent., the event.target would be title and not parent. Thus not matching your cases.
So my suggestion was to use .closest
event.target.closest(".parent");
Thus making it slightly longer to find… and you’d have to be sure that another parent element did not have the same class name.
event.target will always give you the correct target, it doesn’t care what the class is, you would need even.target.classList.contains('title') to get the conflict
You’re telling me you’re going to do a .contains() for every child element? Which means anytime you add a new child element you’re going to have to open your JS file and add it.
Say if you wanted to do event delegation on this li.
Are you telling me you’re going to do .contains() on every element in this li?
No,. I hope not. It’s not practical. And whenever you click on any element inside this li., the event.target will equal to the exact element you click.
This is the point i was making. You either have to use click events on each li OR use event delegation but use event.target.closest(".property_tile") and ensure no other elements except for the property tiles is using the class “.property_title”. Otherwise you would get a false positive.
So an example would be if I had another div somewhere on page that used the class name “.property_tile” and it wasn’t really a tile., but if i clicked a child element of that div it would assume I was clicking a property li tile. So class name does matter.
No, you misunderstand. I’m not suggesting that’s what you do, just that event.target gives you the actual event target, it doesn’t care what class is being used. The classList of a particular element is just one field out of many different fields of the object that represents the DOM element. Sure, if you want to switch on classes, and closest is the best option in your particular context, use closest, but that’s not the same thing
Yes, I know it gives you the actual event target. Everyone knows that.
I think you’re misunderstanding my suggestion.
document.querySelector("body").addEventListener("click", function(e){
// if clicked element is a child of .property_titles
if (e.target.closest(".property_tiles")){
// do action
}
});
When I say the class matters, I’m saying that it matters when you use closest()., since another group of elements with the same class name would give false positives. So you would be restricted to using unique class names.
you’re suggestion is fine, if you are switching on class names or multiple same properties and you know you want to base that selection on position in the DOM. I am not arguing against it or misunderstanding it.
If you did event delegation on the parent divs,. then when a user clicks on the title or any child tag inside of parent., the event.target would be title and not parent . Thus not matching your cases.
As I say, this is going in circles. You seem to have assumed that when I said “…if you were to [say], put an event listener on the <body> , it would “see” all the events underneath it.” I was saying something like “…if you put an event listener on the <body>, then it would see all the events under it and you could select them by checking the class of the event target”. You’ve invented a [common] scenario, then proceeded to correct me as if I was the one who suggested it. There’s nothing wrong with your advice, but it was you who suggested it, not me: it is the correct way to deal with a common scenario, but I have no idea why you thought it was a reply to what I said
If you did event delegation on the parent divs,. then when a user clicks on the title or any child tag inside of parent., the event.target would be title and not parent . Thus not matching your cases.
contradict
Yes, I know it gives you the actual event target. Everyone knows that
The event target is not title. It’s an object that represents a DOM node. title is an entry in an array on a property called classList. I get you think that it’s really obvious that you what meant was really clear, but it didn’t read as that
then when a user clicks on the title or any child tag inside of parent., the event.target would be title and not parent.
document.querySelector(".grandparent").addEventListener("click", function(e){
console.log(e.target)
// could be <title></title> or <div class="parent"></div> instead of the intended div ."parent" (all depends where inside div is clicked)
});