events

Events refer to interactions or occurrences in the web browser, such as user actions (e.g., clicks, keypresses), system events (e.g., page loading, resizing), or custom triggers. JavaScript allows you to listen for and respond to these events using event listeners. Event listeners are functions that are executed in response to a specific event, enabling you to add interactivity and behavior to your web pages. Events are a fundamental part of creating dynamic and interactive web applications.


//onload
const element = document.body;
element.onload = () => alert("This is an onload event");

onclick


//onclick
const myButton = document.getElementById("myButton");
myButton.onclick = () => alert("This is an onclick event");

onchange


//onchange
const myInput = document.getElementById("myInput");
myInput.onchange = () => alert("This is an onchange event");

onmouseover/onmouseout


//onmouseover/onmouseout
const myDiv = document.getElementById("myDiv");
myDiv.onmouseover = () => (myDiv.style.backgroundColor = "#89e757");
myDiv.onmouseout = () => (myDiv.style.backgroundColor = "#B3E8FF");

onmousedown/onmouseup


//onmousedown/onmouseup
const myDiv2 = document.getElementById("myDiv2");
myDiv2.onmousedown = () => (myDiv2.style.backgroundColor = "#c962c1");
myDiv2.onmouseup = () => (myDiv2.style.backgroundColor = "#B3E8FF");