Programming Code Examples

What are different events supported by javascript3 min read

The programming which allows computations based on the activities in a browser or by the activities performed by the user on the elements in a document is known as event-driven programming.

An event is the specification (essentially an object created by the browser and JavaScript) of something significant has occurred. Examples of events are click, submit, keyup etc. In JavaScript all the event names are specified in lowercase. An event handler (essentially a function) is a set of statements (code) that handles the event.




Below table lists most commonly used events and their associated tag attributes:

EventTag Attribute
bluronblur
changeonchange
clickonclick
dblclickondblclick
focusonfocus
keydownonkeydown
keypressonkeypress
keyuponkeyup
loadonload
mousedownonmousedown
mouseuponmouseup
mousemoveonmousemove
mouseoveronmouseover
mouseoutonmouseout
resetonreset
selectonselect
submitonsubmit
unloadonunload

Below table lists event attributes and their corresponding tags in HTML:

AttributeTagDescription
onblur<a><button><input><textarea><select>The link looses input focusThe button looses input focusThe input element looses focusThe text area looses focusThe selection element looses focus
onchange<input><textarea><select>The input element is changed and looses focusThe text area changes and looses focusThe selection element is changed and looses focus
onclick<a><input>The user clicks on the linkThe input element is clicked
ondblclickMost elementsThe user double clicks the mouse left button
onfocus<a><input><textarea><select>The link acquires focusThe input element acquires focusA text area acquires focusA selection element acquires focus
onkeydown<body>form elementsA key is pressed down
onkeypress<body>form elementsA key is pressed down and released
onkeyup<body>form elementsA key is released
onload<body>The document finished loading
onmousedownMost elementsThe user clicks the left mouse button
onmouseupMost elementsThe left mouse button is released
onmousemoveMost elementsThe user moves the mouse cursor on the element
onmouseoverMost elementsThe mouse cursor is moved over the element
onmouseoutMost elementsThe mouse cursor is moved away from the element
onreset<form>The reset button is clicked
onselect<input><textarea>The mouse cursor is moved over the elementThe text is selected within the text area
onsubmit<form>The submit button is pressed
onunload<body>The user exits the document

The process of linking an event handler with an event is known as registration. There are two ways to register an event handler in DOM 0 event model. First way is by assigning the event handler script to an event tag attribute as shown below:

In the above code, the event handler func1 is assigned to the event attribute onclick of a button.

The second way is by assigning the event handler to the event property of the element as shown below:

Take your time to comment on this article.

Add comment