Events

An event is the result of an action being carried out by the user or the browser caused by something they have done on the web page, be that a mouse movement, a button click, scrolling down, etc.

 

Some of the more common events are:

Mouse Events
onclick mouse click
ondbclick mouse double click
onmouseover mouse pointer over element
onmouseout mouse pointer moves out of element
onmousedown mouse button clicked
onmouseup mouse button released
onmousemove mouse pointer moved
Keyboard Events
onkeydown key press
onkeyup key release
onkeypress key pressed & released
Form Events
onchange form element change
onsubmit form submitted
onreset form reset
onselect form element selected
onblur form element lost focus
onfocus form element focus
Frame Events
onload document, frame or object load
onunload document, frame or object unload
onscroll document scroll

 

These events can be acted upon by the use of event handlers (/listeners) that then carry out a specified action.

 

3 approaches:

  • Inline event handling
  • Event handling functions
  • Event listeners

 

Inline

Placing the JavaScript inline within the HTML:

 

Event handling functions

Using a function that is called upon the event being triggered for the element:

 

Using an event handler on the DOM element which is then assigned to an anonymous function. An anonymous is being used since there's no need to name the function as it will only be carried out when the specified action occurs for that element, in this case onclick: 

*note: use of semi-colon at end of anonymous function, due to this being a statement piece of code.

 

 

Event listeners

Requires 4 pieces of information:

  1. The DOM element
  2. The event as a string without 'on'
  3. The function to be run
  4. Event capture, boolean value set false 99% of the time – optional, only required for advanced event handling

 

This example shows two approaches, the first using a traditional function call, and the second using an anonymous function within the statement:

Leave a Reply