JS click event and 'this' item

javascript click button by id
javascript trigger click event on element
jquery click event
javascript click button by class
javascript events
addeventlistener
javascript click button programmatically
javascript button events

I'm really newbie in vanilla JS, so I'm a bit confused.

Let's say I have this html structure:

<div class="play-animation"></div>
<div class="play-animation"></div>
<div class="play-animation"></div>
<div class="play-animation"></div>
<div class="play-animation"></div>

I have this code to check if I click on one of those items:

document.addEventListener('click', function(item) {

  if(item.target.matches('.play-animation')) {

    console.log(item);
  }
})

And it doesn't console.log the element I've clicked. I understand why it doesn't console it, but I don't know how to rebuild code, so it'll console.log item I've clicked.

Thank you very much for your help in advance!

There are lot of solutions to bind event to elements. one with javascript and DOM events is like:

document.querySelectorAll('.play-animation').forEach(function (item) {
  item.addEventListener('click', function(){
      console.log(this);
  })
})
div{
  border:1px solid red;
  padding:4px;
}
<div class="play-animation">1</div>
<div class="play-animation">2</div>
<div class="play-animation">3</div>
<div class="play-animation">4</div>
<div class="play-animation">5</div>

HTMLElement.click(), object.onclick = function(){myScript};. Try it Yourself ». In JavaScript, using the addEventListener() method: object.addEventListener("click", myScript);. Definition and Usage The onclick event occurs when the user clicks on an element.

target is the element that was clicked. With your quoted HTML, assuming there's some CSS that makes those divs not zero-height (as they will be without content), it happens that that will always be the element you want to check because there are no descendant elements in your divs, but from your question I suspect you have descendant elements you haven't shown, for instance:

<div class="play-animation">Some <span>styled</span> text</div>
<div class="play-animation"><img src="2.png"></div>

If the user clicks the span or img above, item.target in your code (item really should be event or e) will be the span or img, not the div.

To find out if the click passed through your div, you use a combination of Element#closest and Node#contains:

document.addEventListener('click', function(event) {
    var div = event.target.closest(".play-animation");
    if (div && this.contains(div)) {
        console.log("Click passed through .play-animation");
    } else {
        console.log("Click didn't pass through .play-animation");
    }
});
<div class="play-animation"><span>text in span</span></div>
<div class="play-animation"><span>text in span</span></div>
<div class="play-animation"><span>text in span</span></div>
<div class="play-animation"><span>text in span</span></div>
<div class="play-animation"><span>text in span</span></div>
<span>text in span but not in a .play-animation div</span>

JavaScript DOM EventListener, Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element. version added: 1.0.click( handler ). handler. Type: Function(​  A JavaScript can be executed when an event occurs, like when a user clicks on an HTML element. To execute code when a user clicks on an element, add JavaScript code to an HTML event attribute: onclick= JavaScript. Examples of HTML events: When a user clicks the mouse. When a web page has loaded. When an image has been loaded.

The correct way is to bind your listeners directly to a DOM nodes, instead of listening whatever click and match a class name.

check this: JavaScript click event listener on class

onclick Event, The onclick JavaScript event occurs when the user clicks on an element. It runs a specified line of code when you click a HTML object that has the  Event propagation is a way of defining the element order when an event occurs. If you have a <p> element inside a <div> element, and the user clicks on the <p> element, which element's "click" event should be handled first? In bubbling the inner most element's event is handled first and then the outer: the <p> element's click event is handled first, then the <div> element's click event.

.click(), Browsers do this by allowing us to register functions as handlers for specific events. edit & run code by clicking it. <p>Click this document to activate the handler.</  @AleksanderLech Just firing an event does not guarantee that the action will take place. It does for click, it does not for change. The use case for events where change doesn't work is when you want to make a change to its value, but you want all the change event handlers to be called (whether they were set with jQuery or not).

Master onclick JavaScript: JavaScript Click Event Explained, jQuery makes listening for click events really easy. If you want to, for example, detect any time an element with the class .click-me is clicked, you  The click event is sent to an element when the mouse pointer is over the element, and the mouse button is pressed and released. Any HTML element can receive this event. Any HTML element can receive this event.

Handling Events :: Eloquent JavaScript, An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there. Here a click runs the  Trigger the click event for the selected elements: $ ( selector ).click () Try it. Attach a function to the click event: $ ( selector ).click ( function ) Try it. Parameter. Description. function. Optional. Specifies the function to run when the click event occurs.

Comments
  • You should include the HTML as well.....
  • Possible duplicate of How to add a onclick event to an element using javascript
  • @Mamun added! thank you!
  • @ZohirSalak Where did you find a reference for .getElementsByClassName()?
  • Re edit: Now the only problem appears to be that you are logging item instead of item.target.
  • Why throw out the attempt to use event delegation entirely?
  • There are good reason for binding an event handler not on the element itself. One example would be event delegation.
  • Yeah, I know. But I've suggested solution for the answer.