JavaScript Events

HTML events are actions that happen to HTML elements. When JavaScript is used in HTML pages, it can react on these events. An HTML event can be something the browser does, or something a user does.

For example,

  • An HTML web page has finished loading
  • An HTML input field was changed
  • An HTML button was clicked

Each event may have an event handler which is a block of code that will execute when the event occurs. An event handler is also known as an event listener. It listens to the event and executes when the event occurs.

HTML allows event handler attributes, with JavaScript code, to be added to HTML elements. For example,

<button onclick="document.getElementById('demo').innerHTML = Date()">Click to Get Time</button>

In this example, the JavaScript code changes the content of the element with id="demo".

Types of Events

Some common events are:

  1. change: An HTML element has been changed. For example, input text, radio button, checkbox, and select elements
  2. click: The user clicks an element
  3. mouseover: The user moves the mouse over an HTML element
  4. mouseout: The user moves the mouse away from an HTML element
  5. keydown: The user pushes a keyboard key
  6. load: The browser has finished loading the page along with external resources like images, javascript and stylesheets
  7. scroll: When you scroll a document or an element
  8. focus: when an element has received focus
  9. blur: when an element has lost focus

Handling Events

There are three ways to assign an event handler:

  1. HTML event handler attribute - For example: onclick
  2. Element's event handler property - Each element has event handler properties such as onclick
  3. The addEventListener() method - It accepts three arguments: event name, event handler function, and Boolean value.

Detecting Visitor Information

JavaScript programming often requires browser detection - that is, the detection of which browser a visitor to a website is using.

For several years, browser detection was accomplished largely by using the userAgent property of the navigator object. The userAgent property is available through the navigator object and shows information about the user’s browser. However, relying on the userAgent property is no longer recommended, because visitors can easily forge it.

A much better way to track what is and is not supported in the visitor’s browser is a technique known as feature testing.

Feature Testing

Using feature testing, sometimes referred to as object detection, a JavaScript program attempts to detect whether the browser that is visiting the web page supports a given feature. The typeof operator is the primary mechanism used to implement feature testing. In general terms, you use the operator as follows:

if (typeof featureName != "undefined") {
// Do Something With That Feature
}

For example, to test for the existence of the getElementById() method,

if (typeof document.getElementById != "undefined") {
alert("getelembyid is supported");
} else {
alert("no getelembyid support");
}