onlyforbopi
9/19/2018 - 6:13 PM

JS.Events.EventListenerOnHTMLElements

JS.Events.EventListenerOnHTMLElements

js-events-eventlisteneronhtmlelements.markdown
content_copyfile_download
  • Rendered
  • Source

JS.Events.EventListenerOnHTMLElements

A Pen by Pan Doul on CodePen.

License.

index.html
content_copyfile_download
<!DOCTYPE html>
<html lang="en">
  <head>
  <title>Second example of an event listener</title>
    <meta charset="utf-8">
</head>
<body>
  <button id="myButton">Click me!</button>
  <p></p>
  <script>
    // instead of using the addEventListener method directly, we used it on a DOM object (the button)
    //  Get a reference of the HTML element that can fire the events you want to detect. This is done
    // using the DOM API that we'll   cover in detail later this week. In this example we used one of 
    // the most common/useful methods: var b = document.querySelector("#myButton");
    var b = document.querySelector("#myButton");
    
    // Call the addEventListener method on this object. In the example: b.addEventListener('click', callback)
    // Every DOM object has an addEventListener method. Once you get a reference of  any HMTL element from 
    // JavaScript, you can start listening to events on it.
    b.addEventListener('click', function(evt) {
      alert("Button clicked");
    });
    
  </script> 
</body>
</html>