JavaScript UI Events

The change in the state(behavior) of an object is known as an Event.

Mouse events.
Moving the mouse: mouseover/out, mouse enter/leave.
Drag’n’Drop with mouse events.
Pointer events.
Keyboard: keydown and keyup.
Scrolling.

Mouse events:

Event Handler Description

onclick Mouse click on an element.

onmouseover Cursor of the mouse comes over the element.

onmouseout Cursor of the mouse leaves an element.

onmousedown Mouse button is pressed over the element.

onmouseup Mouse button is released over the element.

onmousemove 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 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.

Keydown Event:

EXAMPLE:

<html>
<head> Javascript Events</head>
<body>

<h2> Enter something here</h2>

<input type="text" id="input1" onkeydown="keydownevent()"/>

<script>

<!--

            function keydownevent()

            {

                        document.getElementById("input1");

                        alert("Pressed a key");

            }

//-->

</script>

</body>

</html>

OUTPUT: