Elaboration of Events

[briefy]

EventTarget

EventTarget is an interface implemented by objects that can receive events and may have listeners for them.

common EventTargets are

• Window
• Document
• Element
• XMLHttpRequest
• AudioNode & AudioContext

an EventTarget support the following methods.

• removeEventListener you must call this method to remove event listeners in the way how you registered it.

     target.addEventListener('click',t,true);
     /* [Y] */ target.removeEventListener('click',t,true);
     /* [N] */ target.removeEventListener('click',t);

• addEventListener

  • [x] capture phase supported in IE9-11 & Edge
  • [ ] passive support status across browser vendors & why need feature detection

  target.addEventListener(type, listener[, options]);
  target.addEventListener(type, listener[, useCapture]);
  /*
   options :
     - capture, invoke the listener in the capture phase ONLY
     - once, one time listener
     - passive, indicating you never call evt.preventDefault(),
                if called it is ignored and will warn you
   useCapture: 
      it is the save as options.capture.
  */

• dispatchEvent

   cancelled = ! target.dispatchEvent(event);
   /*
      The return value is FALSE.
         1. if the event is cancelable AND 
         2. at least one of the event handlers which handled this event called   
            Event.preventDefault(). 
      Otherwise, it returns TRUE.
    */

NOTES: There is a create-init-dispatch process of dealing with events.

• create:
  1. document.createEvent
  2. Event constructors such as (Event MouseEvent KeyBoardEent FocusEvent)
• init:
  1. init in the constructor
  2. use initEvent initMouseEvent initUIEvent methods

a simple implementation of EventTarget

class EventTarget {

  listeners = {};

  addEventListener(type, listener, option) {
    let { once } = option;
    let { listeners } = this;

    if (!listeners[type]) {
      listener[type] = [];
    }

    // if once
    listener.once = once ? true : false;

    listener[type].push(listener);
  }

  removeEventListener(type, listener) {
    let { listeners } = this;
    let listenersOfType = listeners[type] || [];

    let index = listenersOfType.indexOf(listener);

    if (index < 0) {
      return;
    }

    listenersOfType.splice(index, 1);
  }

  dispatchEvent(evt) {
    let { type, ...other } = evt;
    let { listeners } = this;

    let listenersOfType = listeners[type] || [];

    listenersOfType.forEach(listener=>{
      // bind this to the EventTarget
      listener.call(this,other);
      if(listener.once){
        this.removeEventListener(listener);
      }
    })
  }
}

[briefy]

Event

let's talk about the event.preventDefault(). you know that when we registered event listeners using target.addEventListener, they are called in the sequence that they are registered by.So, if we call event.preventDefault(),actually we will cancel the event. if the event is a self-dispatched event(which is not created and initiated by the browser ), target.dispatchEvent(event) will return false.

when we trigger an event in a browser, it is that we notify the browser to do its default behavior and we can do what we wanna do in the callback hook by the way.So if we call the event.preventDefault(), actually we tell the browser to stop doing its default behavior. You know sometimes,on some elements there is no default behavior,like div with click,and event.preventDefatul() prevents nothing.

in the downward comments, I will elaborate on that when an event is triggered what will the browser do by default. when you call event.preventDefault(), the browser will stop to do the jobs it should be done by default.BUT, it won't stop the propagation and other listeners from being called. That is what event.stopPropgation() and event.stopImmediatePropagation() will do.

[briefy]

popstate & hashchange

hashchage inerface

popstate Manipulating the browser history Browsers tend to handle the popstate event differently on page load. Chrome (prior to v34) and Safari (prior to 10.0) always emit a popstate event on page load, but Firefox doesn't

IE and Edge < 14 do not fire the popstate event when the URL's hash value changes

calling history.pushState() orhistory.replaceState()won't trigger a popstate event what triggers apopstate event:

• window.loaction=/path/change/or#fragment-change not search change it will reload the page
• history.back history.go history.forward
• browser actions(--> or<--- button)