Javascript DOM- Custom Events
The change in the state of an objects is called an Events. In HTML, there are different events that represent that some activity is performed by the user or by the browser. When javascript code is included in the HTML element, javascript(js) reacts over these events and allows the execution. This process of reacting to the events is called Event Handling. Thus, javascript handles the HTML events via Event Handlers.
Mouse events:
Event Performed Description
click Mouse click on an element.
mouseover Cursor of the mouse comes over the element.
mouseout Cursor of the mouse leaves an element.
mousedown Mouse button is pressed over the element.
mouseup Mouse button is released over the element.
mousemove Mouse movement takes place.
Keyboard events:
Event Handler Description
onkeydown & onkeyup User press and then release the key.
Form events:
Event Handler Description
onfocus User focuses on an element.
onsubmit User submits the form.
onblur Focus is away from a form element.
onchange User modifies or changes the value of a form element.
Window/Document events:
Event Handler Description
onload Browser finishes the loading of the page.
onunload Visitor leaves the current webpage, the browser unloads it.
onresize Visitor resizes the window of the browser.
Example: MouseOver Event
<html>
<head>
<h1> Javascript Events </h1>
</head>
<body>
<script language="Javascript" type="text/Javascript">
<!--
function mouseoverevent()
{
alert("This is I2Tutorials");
}
//-->
</script>
<p onmouseover="mouseoverevent()"> Keep cursor over me</p>
</body>
</html>
OUTPUT:
