DOM Events Introduction



In computing, an event is an action or occurrence recognized by software that may be handled by the software. Computer events can be generated or triggered by the system, by the user or in other ways. Definition Source

enter image description here

HTML events are "things" that happen to HTML elements. JavaScript can "react" on these events. via Event Listeners. Additionally, custom events can be triggered using dispatchEvent. But this is only an introduction, so lets get started!

Basic Event Listener

To listen to events, you call target.addEventListener(type, listener);

function loadImage() {
  console.log('image code here!');
var myButton = document.querySelector('#my-button');
myButton.addEventListener('click', loadImage);

This will trigger loadImage every time my-button is clicked.

Event listeners can be attached to any node in the DOM tree. to see a full list of all the events natively triggered in the browser: go here MDN link for full event list