JavaScript/Event Handling
[edit] Event Handlers
An event occurs when something happens in a browser window. The kinds of events that might occur are due to:
- A document loading
- The user clicking a mouse button
- The browser screen changing size
When a function is assigned to an event handler, that function is run when that event occurs.
A handler that is assigned from a script used the syntax '[element].[event] = [function];', where [element] is a page element, [event] is the name of the selected event and [function] is the name of the function that occurs when the event takes place.
For example:
document.onclick = clickHandler;
This handler will cause the function clickHandler() to be executed whenever the user clicks the mouse anywhere on the screen. Note that when an event handler is assigned, the function name does not end with parentheses. We are just pointing the event to the name of the function. The clickHandler function is defined like this:
function clickHandler(evt) { //some code here }
By convention the event is represented by the variable 'evt'. In some browsers the event must be explicitly passed to the function, so as a precaution it's often best to include a conditional to test that the evt variable has been passed, and if it hasn't then to use an alternative method that works on those other browsers.:
function clickHandler(evt) { evt = evt || window.event; //some code here }
Elements within a document can also be assigned event handlers. For example:
document.getElementsByTagName('a')[0].onclick = linkHandler;
This will cause the linkHandler() function to be executed when the user clicks the first link on the page.
Keep in mind that this style of handler assignment depends on the link's position inside the page. If another link tag is added before this one, it will take over the handler from the original link. A best practice is to maintain the separation of code and page structure by assigning each link an identifier by using the id attribute.
<a id="faqLink" href="faq.html">Faq</a>
A handler assignment can then work regardless of where the element is positioned.
document.getElementById('faqLink').onclick = linkHandler;
Events are actions that can be detected by JavaScript, and the event object gives information about the event that has occurred. Sometimes we want to execute a JavaScript when an event occurs, such as when a user clicks a button. Events are normally used in combination with functions, and the function will not be executed before the event occurs! Javascript event handlers are divided into2 types 1. Interactive event handlers- depends on user interactin with the HTML page ex. Clicking a button 2. Non-Interactive event handlers-does not need user interaction. Ex. onload Event Attributes Below is the event attributes that can be inserted into different HTML elements to define event actions. IE: Internet Explorer, F: Firefox, O: Opera, W3C: W3C Standard.
Attribute The event occurs when... IE F O W3C
onblur An element loses focus 3 1 9 Yes onchange The content of a field changes 3 1 9 Yes
onclick Mouse clicks an object 3 1 9 Yes
ondblclick Mouse double-clicks an object 4 1 9 Yes
onerror An error occurs when loading 4 1 9 Yes
a document or an image
onfocus An element gets focus 3 1 9 Yes
onkeydown A keyboard key is pressed 3 1 No Yes
onkeypress A keyboard key is pressed 3 1 9 Yes
or held down
onkeyup A keyboard key is released 3 1 9 Yes
onload A page or image is 3 1 9 Yes
finished loading
onmousedown A mouse button is pressed 4 1 9 Yes
onmousemove
The mouse is moved 3 1 9 Yes
onmouseout
The mouse is moved 4 1 9 Yes
off an element
onmouseover
The mouse is moved 3 1 9 Yes
over an element
onmouseup
A mouse button is released 4 1 9 Yes
onresize
A window or frame is resized 4 1 9 Yes
onselect
Text is selected 3 1 9 Yes
onunload
The user exits the page 3 1 9 Yes
Mouse / Keyboard Attributes Property Description IE F O W3C altKey
Returns whether or not the "ALT" 6 1 9 Yes
key was pressed when an event
was triggered
button
Returns which mouse button was 6 1 9 Yes
clicked when an event was triggered
clientX
Returns the horizontal coordinate of 6 1 9 Yes
the mouse pointer when an event was triggered
clientY
Returns the vertical coordinate of the 6 1 9 Yes
mouse pointer when an event was triggered
ctrlKey
Returns whether or not the "CTRL" key 6 1 9 Yes
was pressed when an event was triggered
metaKey
Returns whether or not the "meta" key 6 1 9 Yes
was pressed when an event was triggered
relatedTarget
Returns the element related to the No 1 9 Yes
element that triggered the event
screenX
Returns the horizontal coordinate of the 6 1 9 Yes
mouse pointer when an event was triggered
screenY
Returns the vertical coordinate of the mouse 6 1 9 Yes
pointer when an event was triggered
shiftKey
Returns whether or not the "SHIFT" key was 6 1 9 Yes
pressed when an event was triggered
Other Event Attributes Property Description IE F O W3C bubbles
Returns a Boolean value that indicates No 1 9 Yes
whether or not an event is a bubbling event
cancelable
Returns a Boolean value that indicates No 1 9 Yes
whether or not an event can have
its default action prevented
currentTarget
Returns the element whose event No 1 9 Yes
listeners triggered the event
Returns the element that triggered the event No 1 9 Yes timeStamp
Returns the time stamp, in milliseconds No 1 9 Yes
from the epoch (system start or event trigger)
[edit] Standard event handlers
| Attribute | Trigger |
|---|---|
| onabort | Loading of image was interrupted |
| onblur | Element loses focus |
| onchange | Element gets modified |
| onclick | Element gets clicked |
| ondblclick | Element gets double clicked |
| onerror | An error occurred loading an element |
| onfocus | An element received focus |
| onkeydown | A key was pressed when an element has focus |
| onkeypress | A keystroke was received by the element |
| onkeyup | A key was released when the element has focus |
| onload | An element was loaded |
| onmousedown | The mouse button was pressed on the element |
| onmousemove | The mouse pointer moves while inside the element |
| onmouseout | The mouse pointer was moved outside the element |
| onmouseover | The mouse pointer was moved onto the element |
| onmouseup | The mouse button was released on the element. |
| onreset | The form's reset button was clicked |
| onresize | The containing window or frame was resized |
| onselect | Text within the element was selected |
| onsubmit | A form is being submitted |
| onunload | The content is being unloaded (e.g. window being closed) |
| onscroll | The user scrolls (in any direction and with any means). |
[edit] Event Handlers as HTML attributes
In HTML, JavaScript events can be included within any specified attribute - for example, a body tag can have an onload event:
<body onload="alert('Hello world!');">
The content of the HTML event attributes is JavaScript code that is interpreted when the event is triggered, and works very similarly to the blocks of JavaScript. This form of code is used when you want to have the JavaScript attached directly to the tag in question.
This type of technique is called inline JavaScript, and can be seen as being a less desirable technique than other unobtrusive JavaScript techniques that have previously been covered. The use of inline JavaScript can be considered to be similar in nature to that of using inline css, where HTML is styled by putting css in style attributes. This is a practice that is best avoided in favour of more versatile techniques.
