Understanding JavaScript Events: A Complete Guide

Rumman Ansari   Software Engineer   2024-07-28 01:44:47   310  Share
Subject Syllabus DetailsSubject Details 1 Questions
☰ TContent
☰Fullscreen

Mouse events:

Event Performed Event Handler Description
click onclick When mouse click on an element
mouseover onmouseover When the cursor of the mouse comes over the element
mouseout onmouseout When the cursor of the mouse leaves an element
mousedown onmousedown When the mouse button is pressed over the element
mouseup onmouseup When the mouse button is released over the element
mousemove onmousemove When the mouse movement takes place.

Keyboard events:

Event Performed Event Handler Description
Keydown & Keyup onkeydown & onkeyup When the user press and then release the key

Form events:

Event Performed Event Handler Description
focus onfocus When the user focuses on an element
submit onsubmit When the user submits the form
blur onblur When the focus is away from a form element
change onchange When the user modifies or changes the value of a form element

Window/Document events

Event Performed Event Handler Description
load onload When the browser finishes the loading of the page
unload onunload When the visitor leaves the current webpage, the browser unloads it
resize onresize When the visitor resizes the window of the browser

Let's discuss some examples over events and their handlers.

onclick Event

<span class="pln">
</span><span class="dec">&lt;!doctype html&gt;</span><span class="pln">
</span><span class="tag">&lt;html</span><span class="pln"> </span><span class="atn">lang</span><span class="pun">=</span><span class="atv">"en"</span><span class="tag">&gt;</span><span class="pln">
</span><span class="tag">&lt;head&gt;</span><span class="pln"> Javascript Events </span><span class="tag">&lt;/head&gt;</span><span class="pln">

</span><span class="tag">&lt;body&gt;</span><span class="pln">
    </span><span class="tag">&lt;form&gt;</span><span class="pln">
        </span><span class="tag">&lt;input</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"button"</span><span class="pln"> </span><span class="atn">onclick</span><span class="pun">=</span><span class="atv">"</span><span class="pln">clickevent</span><span class="pun">()</span><span class="atv">"</span><span class="pln"> </span><span class="atn">value</span><span class="pun">=</span><span class="atv">"Who's this?"</span><span class="pln"> </span><span class="tag">/&gt;</span><span class="pln">
    </span><span class="tag">&lt;/form&gt;</span><span class="pln">
</span><span class="tag">&lt;/body&gt;</span><span class="pln">

</span><span class="tag">&lt;/html&gt;</span><span class="pln">


</span><span class="tag">&lt;script</span><span class="pln"> </span><span class="atn">language</span><span class="pun">=</span><span class="atv">"Javascript"</span><span class="pln"> </span><span class="atn">type</span><span class="pun">=</span><span class="atv">"text/Javascript"</span><span class="tag">&gt;</span><span class="pln">

	</span><span class="kwd">function</span><span class="pln"> clickevent</span><span class="pun">()</span><span class="pln">
	</span><span class="pun">{</span><span class="pln">
		document</span><span class="pun">.</span><span class="pln">write</span><span class="pun">(</span><span class="str">"This is JavaTpoint"</span><span class="pun">);</span><span class="pln">
	</span><span class="pun">}</span><span class="pln">
	 
</span><span class="tag">&lt;/script&gt;</span>

No Program Data.

Stay Ahead of the Curve! Check out these trending topics and sharpen your skills.