Pak Jiddat - Innovative Software Services

Read: In the name of thy Lord Who createth, Createth man from a clot. Read: And thy Lord is the Most Bounteous, Who teacheth by the pen, Teacheth man that which he knew not. Nay, but verily man is rebellious That he thinketh himself independent!. Lo! unto thy Lord is the return. (Sura Alalaq 96:8)

Adding event listeners using JavaScript

Created On: 04 Apr, 2018: 12:20:23 - Tags : javascript


The addEventListener function can be used to listen for events. The function can be called on any HTML DOM object such as Html elements, Html document, the window object or objects that support events such as xmlHttpRequest. The following example shows how to attach event listener to the window object:

window.addEventListener("resize", function(){
    document.getElementById("demo").innerHTML = sometext;

The above code sets the inner html of the html element with id 'demo' to some text. The first parameter of the addEventListener function is the name of the event to monitor. The second argument is the handler function. An optional third argument allows specifying the event propagation method.

Two event propagation methods are supports. "Bubbling" and "Capturing". The Bubbling method implies that the events are handled from inside out. For example if a div tag contains a paragraph tag, and the paragraph tag is clicked, then the event handler for the paragraph tag will be called first and then the event handler for the div tag will be called.

In the "Capturing" method of event propagation, the events are handled from the outside in. In the previous example, if we click on the paragraph tag, the event handler for the div tag will be called first, followed by the event handler for the paragraph tag.

Related Articles

  1. Using Prefetch, Preload and Preconnect for speeding page load times
  2. Get current unix timestamp using Javascript
  3. Fetching html elements using CSS selectors with Javascript
  4. Fetching html elements using CSS class names
  5. Fetching parent node element of a HTML node
  6. Adding option to html selectbox using Javascript
  7. Changing CSS styles using Javascript
  8. Allowing Cross Origin Requests using htaccess
  9. NodeJs permission denied error
  10. Customizing Redmine layout
  11. Passing parameters to Jquery event handler function
  12. W3C.Data
  13. Making cross domain Ajax calls using JSONP
  14. Use of Preflight request in HTTP Cross Origin Resourse Sharing (CORS)
  15. Using cookies in Javascript
  16. Javascript JSON guide
  17. Convert javascript object to json string
  18. Javascript date object
  19. Get the time using JavaScript
  20. Using keydown event handler for detecting enter key press
  21. Get co-ordinates of element relative to document using Jquery
  22. Using clearTimeout and onmouseenter, onemouseleave events
  23. Replacing a string using Javascript replace function
  24. Base64 Encoding of utf-8 encoded string using Javascript
  25. Setting CSS styles using JQuery
  26. Replacing html element using replaceWith jquery function
  27. Iterate throught Javascript object properties
  28. Select contents on text field