JavaScript is meant to add interactivity to our web pages, i.e., the user does something and the page reacts. Therefore there should be a way of detecting user actions so that our page knows when to react by executing appropriate functions.
JavaScript programs use an event-driven programming model.An event is a signal from the browser that something has happened.
When the user does something an event takes place and JavaScript generates event objects to represent the user's actions. The event object keeps tracks of various events that occur on the page, such as the user moving the mouse or clicking on the link.Whenever an event fires, the computer places appropriate data about the event into the event object
Besides the events caused by user's action , there are some other events like load that are not caused by the users. The load event fires when a page has been loaded.
To make DOM objects respond to events, we attach event listeners to them, which are simply JavaScript functions.
There are many types of events:
Some of the event object's property and their description :
SrcElement: The element that fired the event
type : Type of event
returnValue : Determines whether the event is cancelled
cancelBubble : Can cancel an event bubble
clientX : Mouse pointer X coordinate relative to window
clientY : Mouse pointer Y coordinate relative to window
offsetX : Mouse pointer X coordinate relative to element that fired the event
offsetY: Mouse pointer Y coordinate relative to element that fired the event
button: Any mouse buttons that are pressed
altKey : True if the alt key was also pressed
ctrlKey : True if the ctrl key was also pressed
shiftKey : True if the shift key was also pressed
keyCode : Returns UniCode value of key pressed
The event object is always passed to the handler and contains a lot of useful information what has happened.
We can access the event object in either of the two ways:
1.)W3C way
2.)Internet Explorer way
1.)W3C way:
Browsers which follow W3C standards always pass the event object as the first argument for the handler.
For instance:
element.onclick = function(event) {
// process data from event
}
We can also use the following method:
function myHandler(event) {
// process data from event
}
element.onclick= myHandler;
It is also possible to use a variable named event in markup event handlers:
<button onclick="alert(event)">See the event</button>
2.)Internet Explorer way:
Internet Explorer provides a global object window.event, which references the last event. And prior to IE9 there are no arguments passed in the handler.
So, it works like this:
// handler without arguments
element.onclick = function() {
// window.event - is the event object
}
Cross Browser Solution:
A generic way of getting the event object is:
element.onclick = function(event) {
event = event || window.event
// Now event is the event object in all browsers.
}
Remember : for a markup handler, just event will do.
<input onclick="alert(event.type)" value="Alert event type"/>
JavaScript programs use an event-driven programming model.An event is a signal from the browser that something has happened.
When the user does something an event takes place and JavaScript generates event objects to represent the user's actions. The event object keeps tracks of various events that occur on the page, such as the user moving the mouse or clicking on the link.Whenever an event fires, the computer places appropriate data about the event into the event object
Besides the events caused by user's action , there are some other events like load that are not caused by the users. The load event fires when a page has been loaded.
To make DOM objects respond to events, we attach event listeners to them, which are simply JavaScript functions.
There are many types of events:
- DOM events, which are initiated by DOM-elements. For instance, a click event happens when an element is clicked, a mouseover - when a mouse pointer comes over an element,
- Window events. For instance, resize - when a browser window is resized,
- Other events, like load, readystatechange. They are used in AJAX and for other needs.
Some of the event object's property and their description :
SrcElement: The element that fired the event
type : Type of event
returnValue : Determines whether the event is cancelled
cancelBubble : Can cancel an event bubble
clientX : Mouse pointer X coordinate relative to window
clientY : Mouse pointer Y coordinate relative to window
offsetX : Mouse pointer X coordinate relative to element that fired the event
offsetY: Mouse pointer Y coordinate relative to element that fired the event
button: Any mouse buttons that are pressed
altKey : True if the alt key was also pressed
ctrlKey : True if the ctrl key was also pressed
shiftKey : True if the shift key was also pressed
keyCode : Returns UniCode value of key pressed
The event object is always passed to the handler and contains a lot of useful information what has happened.
We can access the event object in either of the two ways:
1.)W3C way
2.)Internet Explorer way
1.)W3C way:
Browsers which follow W3C standards always pass the event object as the first argument for the handler.
For instance:
element.onclick = function(event) {
// process data from event
}
We can also use the following method:
function myHandler(event) {
// process data from event
}
element.onclick= myHandler;
It is also possible to use a variable named event in markup event handlers:
<button onclick="alert(event)">See the event</button>
2.)Internet Explorer way:
Internet Explorer provides a global object window.event, which references the last event. And prior to IE9 there are no arguments passed in the handler.
So, it works like this:
// handler without arguments
element.onclick = function() {
// window.event - is the event object
}
Cross Browser Solution:
A generic way of getting the event object is:
element.onclick = function(event) {
event = event || window.event
// Now event is the event object in all browsers.
}
Remember : for a markup handler, just event will do.
<input onclick="alert(event.type)" value="Alert event type"/>