This is the 7th day of my participation in Gwen Challenge

In addition to node and operation apis, the DOM also has an important part, which is the event, which is covered in a more comprehensive way here.

I. Event flow

Event flow describes the order in which events are received from the page. DOM2 event flow is divided into three phases: capture phase, target phase, and bubble phase.

  • Capture phase: The Document object first receives the event and then moves down the DOM tree until it reaches the actual target element
  • Target phase: The target element receives events
  • Bubble phase: Up the DOM tree from the target element until document

So the capture stage must precede the bubble stage; The third argument to addEventListener is to specify whether to fire in the capture or bubble phase.

Event handlers

Event handlers can be specified in three ways, as follows:

  • HTML event handlers: Set event handlers with HTML properties, such as:
<input type="button" value="Click Me" onclick="alert('Clicked')">
Copy the code
  • Dom0-level event handlers: Set event handlers through the Element property, for example:
var btn = document.getElementById("myBtn");
btn.onclick = function(){
    alert("Clicked");
};
Copy the code
  • DOM2 level event handler: through the addEventListener/removeEventListener method adding/removing the event handler, such as:
var btn = document.getElementById("myBtn");
var handler = function(){
    alert(this.id);
};
btn.addEventListener("click", handler, false);

btn.removeEventListener("click", handler, false);
Copy the code

The third option is recommended.

3. Event object

Dom-compatible browsers pass an event object to the event handler when it is called. The common properties and methods of event are as follows:

  • Target: The event target, which is the DOM element that triggers the event
  • Type: Event type, such as ‘click’, ‘mouseover’, etc
  • PreventDefault: preventDefault behavior, for example<a href="#">xxx</a>Clicking yes will add a ‘#’ to the URL by default, via the calle.preventDefault()You can cancel this default behavior
  • StopPropagation: Prevents events from bubbling

4. Event type

There are many browser events, which can be divided into the following types:

  • UI events that are triggered when the user interacts with elements on the page, such as’ Load ‘, ‘unload’, ‘resize’, ‘Scroll’
  • Focus events that are triggered when an element gains or loses focus, such as ‘blur’, ‘focus’
  • Mouse events that are triggered when the user performs an action on the page with the mouse, such as ‘click’, ‘dbclick’
  • Wheel event that is triggered when a mousewheel (or similar device) is used, such as ‘mousewheel’
  • Text events that fire when text is entered into a document, such as ‘textInput’
  • Keyboard events that are triggered when the user performs an action on the page using the keyboard, such as’ keyDown ‘, ‘keypress’, ‘keyUp’
  • Synthesized event that is emitted when a character is entered for the IME(Input Method Editor
  • Mutation event, which is triggered when the underlying DOM structure changes, such as ‘DOMSubtreeModified’
  • HTML5 events such as’ contextMenu ‘, ‘beforeUnload’, ‘DOMContentLoaded’, ‘hashchange’
  • Device events, such as ‘orientationchange’
  • Touch gestures such as’ touchStart ‘, ‘Touchend’, ‘gesturestart’, ‘gestureend’

Five, memory performance

The number of event handlers added to a Web page has a direct impact on memory and performance, usually handled in one of two ways:

  • Event delegate, which uses event bubbling to set up an event handler on a parent element (usually a document) that will be handled when a child element event bubbles on the parent element
  • Remove the event handler, that is, manually remove the above bound event when the DOM node is not in use. Note:

If an element with an event handler is removed by innerHTML, the event handler that was added to the element will most likely not be garbage collected. (Section 13.5.2 of the Little Red Book)

6. Simulated events

You can use the createEvent method to create an event object, for example:

var btn = document.getElementById("myBtn");
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click".true.true.document.defaultView, 0.0.0.0.0.false.false.false.false.0.null);

btn.dispatchEvent(event);
Copy the code

At this point, DOM event-related content is basically covered.