JavaScript's interaction with HTML is handled
through events that occur when the user or browser manipulates a page.
When the page loads, that is an event. When the user
clicks a button, that click, too, is an event. Another example of events are
like pressing any key, closing window, resizing window etc.
Developers can use these events to execute
JavaScript coded responses, which cause buttons to close windows, messages to
be displayed to users, data to be validated, and virtually any other type of
response imaginable to occur.
Events are a part of the Document Object Model (DOM)
Level 3 and every HTML element have a certain set of events which can trigger
JavaScript Code.
Without events there are no scripts. Take a look at
any web page with JavaScript in it: in nearly all cases there will be an event
that triggers the script. The reason is very simple. JavaScript is meant to add
interactivity to your pages: the user does something and the page reacts.
Here we will see few examples to understand a
relation between Event and JavaScript:
Example
Mouse Over Me and Click Me
Reacting to Events
A JavaScript can be executed when an event occurs,
like when a user clicks on an HTML element.
To execute code when a user clicks on an element,
add JavaScript code to an HTML event attribute:
onclick=JavaScript
Examples of HTML events:
HTML Event Attributes
To assign events to HTML elements you can use event
attributes.
Example
Assign an onclick event to a button element:
<button onclick="displayDate()">Try
it</button>
In the example above, a function named displayDate
will be executed when the button is clicked.
The onload and onunload events are triggered when
the user enters or leaves the page.
The onload event can be used to check the visitor's
browser type and browser version, and load the proper version of the web page
based on the information.
The onload and onunload events can be used to deal
with cookies.
Example
<body onload="checkCookies()">
The onchange event are often used in combination
with validation of input fields.
Below is an example of how to use the onchange. The
upperCase() function will be called when a user changes the content of an input
field.
Example
<input type="text" id="fname"
onchange="upperCase()">
The onmouseover and onmouseout events can be used to
trigger a function when the user mouses over, or out of, an HTML element.
Example
A simple onmouseover-onmouseout example:
Mouse
Over Me
The
onmousedown, onmouseup and onclick Events
The onmousedown, onmouseup, and onclick events are
all parts of a mouse-click. First when a mouse-button is clicked, the
onmousedown event is triggered, then, when the mouse-button is released, the
onmouseup event is triggered, finally, when the mouse-click is completed, the
onclick event is triggered.
Example
A
simple onmousedown-onmouseup example:
Click Me
More
Examples
onmousedown
and onmouseup
Change an image when a user holds down the mouse
button.
onload
Display an alert box when the page has finished
loading.
onfocus
Change the background-color of an input field when
it gets focus.
Mouse
Events
Change the color of an element when the cursor moves
over it.
Event
Value Description
onchange script Script
runs when the element changes
onsubmit script Script
runs when the form is submitted
onreset script Script runs when the form is reset
onselect script Script runs when the element is selected
onblur script Script runs when the element loses focus
onfocus script Script
runs when the element gets focus
onkeydown script Script
runs when key is pressed
onkeypress script Script
runs when key is pressed and released
onkeyup script Script
runs when key is released
onclick script Script runs when a mouse click
ondblclick script Script
runs when a mouse double-click
onmousedown script Script runs when mouse button is pressed
onmousemove script Script runs when mouse pointer moves
onmouseout script Script
runs when mouse pointer moves out of an element
onmouseover script Script
runs when mouse pointer moves over an element
onmouseup script Script
runs when mouse button is released
No comments:
Post a Comment