Events:
1) Event is an action performed by the user at client-side.2) In JS, interaction of html elements is handled through events.
3) Every Html element have set of events that can trigger the JS code.
4) Ex:page loading, clicking a button, closing a window,mouse passes over text or image.
Event Handling: Capturing events and responding to them. The system sends events to program and program responds to them.
Event Handlers: special purpose functions, those are predefined in the JS.
1) Html Input events: When we perform actions on html elements like submitting,focusing text control then these events will fire.
2) Mouse Events: When we pass mouse over an html element then these events will fire.
3) Click Events: When we click on html elements then click events will fire.
4) Load Events: When page loads these events will fire.
Code:
output:
After mouse over on text:
After mouse released on text:
After mouse button pressed on text:
After mouse button released on text:
Task: Creating web page with mouse and keyboard events.
Code:
Output:
When mouse over on to Reset All fields button:
When mouse out from Reset All fields button:
When we focus on to From text box:
After Blur:
Before onchange event fire:
After onchange event fire:
Before onselect event fire:
After onselect event fire:
When we press shift key in text area:
When we press any key other than shift key in text area:
When onkeydown event fire:
Check that which key is pressed in text area.If we click the shift key, it will print the text message as "The SHIFT key was pressed!" otherwise "The SHIFT key was NOT pressed!".
and the text color is black.
When onkeyup event fire:
When this event was fired then the text color changed to pink.
When we click on Send button:
After clicked on OK:
Onload( ):
When web page is loading, this event will fire.
Onclick( ):
When we click on html element,this event will fire.
Code:
Output:
When page loads:
Before onclick event fire:
After onclick event fire:
