DOM - Event

> (World Wide) Web - (W3|WWW) > The Document Object Model W3C API Interface (DOM) > DOM - Event

1 - About

Event are code structures that listen out for things happening to the document.

In the DOM specification, you can find the following:

  • The concept of a regular event parent and a cross-boundary event parent

The callback function that handle the event can be created with the help of:

  • An event handler. Its name starts with “on” and is followed by the name of the event for which it is intended. (Example: onClick)

and get back an event object

Advertising

3 - Features

The following features are defined in the DOM Events specification:

  • MouseEvent interface
  • MouseEventInit dictionary type
  • The UIEvent interface's detail attribute

An event's type is synonymous of name type (ie “an event named click” or “if the event name is keypress”)

4 - Example

For example, the following document fragment:

<button class="btn btn-info" onclick="console.log('Bouh!')" >Click Me</button>

5 - Glossary

In the contexts of events, the terms fire and dispatch are used as defined in the DOM specification:

5.1 - Fire

5.2 - Dispatch

Dispatching an event means to follow the steps that propagate the event through the tree.

5.3 - Trusted

The term trusted event is used to refer to events whose isTrusted attribute is initialized to true

5.4 - Missed

6 - Management

6.1 - List

In the chrome devtool

Advertising

6.2 - Prevent default

If you don't want to have the default beahavior (such as following a link), you can prevent it with the event.preventDefault() function.

Example:

  • The HTML link that will not work anymore
<p>Clicking on the below link will not work</p>
<a href="https://gerardnico.com">Go to the best website on the planet</a>
  • The javascript code to prevent the default behavior with the event.preventDefault() function
document.querySelector('a').onclick = function(event) {
       console.log( "You are no longer following the link" );
       event.preventDefault();
}

7 - Documentation / Reference

Advertising
web/dom/event/event.txt · Last modified: 2019/03/12 09:27 by gerardnico