List various events on HTML element and explain Event handling in JavaScript with example.

84views

written 6.3 years ago by

binitamayekar ★ 6.6k

• modified 6.2 years ago

Events on HTML

There are various events occurred on HTML, some of that are as follows

onclick - Triggers on a mouse click
ondblclick - Triggers on a mouse double-click
ondrag - Triggers when an element is dragged
oninput - Triggers when an element gets user input
oninvalid - Triggers when an element is invalid
onkeydown - Triggers when a key is pressed
onkeypress - Triggers when a key is pressed and released
onkeyup - Triggers when a key is released
onload - Triggers when the document loads
onmousedown -Triggers when a mouse button is pressed
onmousemove - Triggers when the mouse pointer moves
onmouseout - Triggers when the mouse pointer moves out of an element
onmouseover - Triggers when the mouse pointer moves over an element
onmouseup - Triggers when a mouse button is released
onpause - Triggers when media data is paused
onplay - Triggers when media data is going to start playing
onplaying - Triggers when media data has start playing
onsubmit - Triggers when a form is submitted

Event & Event Handling

Events are nothing but actions that are detected by a programming language when user performs a particular task.
JavaScript's interaction with HTML is handled through events that occur when the user or the browser manipulates a page.
There are a lot of different types of events that can occur, for example:
- The user clicking the mouse over a certain element or hovering the cursor over a certain element.
- The user pressing a key on the keyboard.
- The user resizing or closing the browser window.
- A web page finishing loading.
- A form being submitted.
- A video being played, or paused, or finishing play.
- An error occurring.
Developers can use these events to execute JavaScript coded responses, which cause buttons to close windows, messages to be displayed to users, data to be validated, and virtually any other type of response imaginable.
Events are a part of the Document Object Model DOM Level 3 and every HTML element contains a set of events which can trigger JavaScript Code.

Example of Event Handling

Let’s take example of ‘onclick’ event type.
This is the most frequently used event type which occurs when a user clicks the left button of his mouse. Programmer can put their validation, warning etc., against this event type.

Example Code:

<!DOCTYPE html>
<html>
<head>
<title>Example of ONCLICK Event Handling</title>
<script type="text/javascript">
<!--
function sayHello() {
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p><h3>Click the following button and see result</h3></p>
<form>
<input type="button" onclick="sayHello()" value="Say Hello" />
</form>
</body>
</html>

When user click on Hello button then onclick event will occur which will trigger sayHello() function.

ADD COMMENT EDIT