Object state change is known as an Event. There are various events in html which represents that some activity is performed by the user or by the browser. When javascript code is included in HTML, js react over these events and allow the execution. This process of reacting over the events is called Event Handling.
 |
| JavaScript Events | IndianTechnoEra |
Here some even list
onclick When mouse click on an element
onmouseover When the cursor of the mouse comes over the element
onmouseout When the cursor of the mouse leaves an element
onmousedown When the mouse button is pressed over the element
onmouseup When the mouse button is released over the element
onmousemove When the mouse movement takes place.
onkeyup When the user press and then release the key
onfocus When the user focuses on an element
onsubmit When the user submits the form
onblur When the focus is away from a form element
onchange When the user modifies or changes the value of a form element
onload When the browser finishes the loading of the page
onunload When the visitor leaves the current webpage, the browser unloads it
onresize When the visitor resizes the window of the browser
Example 1: Top four even example using html css and javascript
<body>
<center>
<button class="eventc" onclick="fn1()">Onclick() button</button><br>
<input class="eventc" id="bid2" type="textbox" onblur="fn2()" placeholder="Onblur()"><br>
<input class="eventc" type="text" onfocus="fn3(this)" placeholder="Onfocus()"><br>
<button class="eventc" onmouseover="fn4()">Onmouseover() event working</button><br>
</center>
</body>
<script>
function fn1() {alert("Onclick event working")}
function fn2() {alert(`By onblur Your input is ${document.getElementById('bid2').value}`)}
function fn3(x) {x.style.background = 'black'; x.style.color = 'white'}
function fn4() {alert("Onmouseover() event working")}
</script>
<style>
.eventc {padding: 10px;margin: 10px;align-items: center;justify-content: center;width: 250px;box-sizing: border-box;}
button {cursor: pointer;background-color: aqua;width: 250px;}
</style>