Pak Jiddat

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