JavaScript Event Handlers

 

 

The JavaScript support various type of events by that developers can perform the task as per the application requirement. When a user visits a website they can do the activities like click on any control, Mouse hovers on the control, on onkeydown these all called events in the javascript. We can respond to all events by using the eventhandlers. 

 

By adding, the Event Handlers to the HTML control so we can respond to the event.  For example, if we want to perform any action on button click then we can do it by the event called onclick

 

 "onclick" event example

 

<!DOCTYPE html>
<html>
<body>

<h2>JavaScript Math.random() </h2>

<p>JavaScript Math.random() example: </p>

<input id="btn_rnd" type="button" onclick="rnd();" value ="Get Random" />
<p id="prandom"> </p>

<script>
function rnd() {
document.getElementById("prandom").innerHTML = Math.random();
}
</script>

</body>
</html>


 

 View Result   

 

 

 

Note
  • The <frameset> element was supported in HTML version 4 but  HTML5 does not support it.

 


Event Handlers for HTML5


The following are the event handlers which can be used with HTML5 elements :


Attribute Description
onclick   It occurs when the user clicked on the object/control.
ondblclick It occurs when the user clicked twice on the object/control.
onkeypress It occurs when a key was pressed over an element then released.
onkeyup It occurs when a key was released over an attribute.
onkeydown   It occurs when a key was pressed over an attribute.
onwaiting It occurs when playback stops because the next frame of a video resource is not available.
onpause It occurs when the video resource has been paused.
onplay It occurs when the video resource starts playback.
onplaying It occurs when playback has begun.
ondurationchange It occurs when the length of the video is modified (i.e. the duration attribute has just been updated).
onemptied It occurs when a video resource element suddenly becomes empty for example, due to a network error.
onended It occurs when the video has reached the end.
oninput It occurs when the text content of an element is changed through the user interface.
oninvalid It occurs when an element is invalid.
onloadeddata It occurs when media data is loaded
onloadedmetadata It occurs when the duration and other media data of a media element is loaded.
onloadstart It occurs when the browser starts to load the media data
onmousedown It occurs when a mouse button is pressed.
onmouseout   It occurs when the mouse out from that element.
onmouseover It occurs when the mouse over any element.
onmouseup It occurs when a mouse button is released.
onmousewheel It occurs when the mouse wheel is being rotated.
onmousemove It occurs when the mouse pointer moves.
onselect It occurs when an element is selected.
onshow It occurs when show event handler.
ontimeupdate It occurs when media changes its playing position.
ontoggle It occurs when the details element is opened or closed.
onvolumechange It occurs when media changes the volume, also when volume is set to "mute".
onstalled It occurs when there is an error in fetching video data.
onsubmit It occurs user submitted a form.
onsuspend It occurs when the browser has been fetching video data, but stopped before the entire video file was fetched
onabort It occurs on an abort event.
oncancel It occurs on cancel event handler.
oncanplay It occurs when video can start play, but might has to stop for buffering.
oncanplaythrough It occurs when video can be played to the end, without stopping for buffering.
onreset It occurs on reset event handler.
onseeked It occurs when the seeking IDL attribute changed to false (i.e. the seeking attribute is no longer true)
onseeking It occurs when the seeking IDL attribute changed to true and the seek operation is taking long enough that the user agent has time to fire the event.
onprogress It occurs when the browser is fetching the media data.
onratechange It occurs when the playback rate has changed (i.e. either the defaultPlaybackRate or the playbackRate has just been updated).


Event Handlers for HTML4


The following are the event handlers which can be used with HTML4 elements that are less when compare with HTML5 :



Attribute Description
onKeyup  It occurs when a key was released over an attribute.
onKeydown It occurs when a key was pressed over an attribute. 
onSubmit It occurs user submitted a form.
onSelect It occurs when an element is selected.
onKeypress It occurs when a key was pressed over an element then released.
onMouseover It occurs when the mouse over any element.
onMousemove It occurs when the mouse pointer moves.
onLoad It occurs when the browser starts to load the media data
onUnload It occurs when a user unloads the document:
onClick It occurs when the user clicked on the object/control. 
onDblClick It occurs when the user clicked twice on the object/control.
onBlur It occurs when a user leaves an input field:  
onMouseup It occurs when a mouse button is released.
onFocus It occurs when an input field gets focus.
onReset It occurs on reset event handler.
onMouseout It occurs when the mouse out from that element.
onChange It occurs when the length of the video is modified (i.e. the duration attribute has just been updated).
onMousedown It occurs when a mouse button is pressed.