Events in JavaScript

The occurence of change in the state of an object is called event. In HTML events are used to perform some action performed by the user or the browser etc. 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. Thus, js handles the HTML events via Event Handlers.

Example of HTML events

An HTML event can be something the browser does, or something a user does.
Here are some examples of HTML events:
1-  An HTML web page has finished loading
2-  An HTML input field was changed
3-  An HTML button was clicked

<button class="p-2" onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
        

Output of above code


Mouse Events in JavaScript

Let's see mouse events with description.

Event Performed Event Handler Description
click onclick This event performed when mouse click on an element.
mouseover onmouseover This event performed when the cursor of the mouse comes over the element.
mouseout onmouseout This event performed when the cursor of the mouse leaves an element.
mousedown onmousedown This event performed when the mouse button is pressed over the element.
mouseup onmouseup This event performed when the mouse button is released over the element.
mousemove onmousemove This event performed when the mouse movement takes place.

Keyboard events in JavaScript

Let's see Keyboard events with description.

Event Performed Event Handler Description
Keydown & Keyup onkeydown & onkeyup This event performed when the user press and then release the key.

Form events in JavaScript

Let's see Form events with description.

Event Performed Event Handler Description
focus onfocus This event performed when the user focuses on an element.
submit onsubmit This event performed when the user submits the form.
blur onblur This event performed when the focus is away from a form element.
change onchange This event performed when the user modifies or changes the value of a form element.

Window/Document events in JavaScript

Let's see Window/Document events with description.

Event Performed Event Handler Description
load onload This event performed when the browser finishes the loading of the page.
unload onunload This event performed when the visitor leaves the current webpage, the browser unloads it.
resize onresize This event performed when the visitor resizes the window of the browser.







The Best

Comment here

If you have any query, if you want to know something about any of technical course related to computer science field, if you have any suggestion about relevant to uploaded content or if you anything wrong here (any mistake in content) than please contact us. Keep in mind, comment should be according to community guidelines.