JS Events
May 21, 2020 by Jane

JS events: HTML events are "things" that happen to HTML elements. JS can be used to react to these events.

We can do insert small snippets of JS into the HTML by doing: onclick='some JS code' or onmouseover="some JS code" (single or double quotes are fine)

With <button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button> the element of ID "demo" will be changed.

With <button onclick="this.innerHTML = Date()">The time is?</button> the button element referred by "this" will be changed.

 

To have more complex actions we can write a JS function and trigger it this way:

<button onclick="displayDate()">The time is?</button>

 

Common events include: onchange, onclick, onmouseover, onload, onkeydown, onmouseout.

Events can be triggered by: mouse, keyboard, progress, animation, page transition, download, clipboard, touchscreen etc.

Full list: https://www.w3schools.com/jsref/dom_obj_event.asp