Hard Events to follow

Hard Events to follow...

Kemal Erdem | @burnpiro
https://erdem.pl
https://github.com/burnpiro

What are Events?

Any object that implements Event Interface

Event Interface

interface Event {
  constructor(DOMString type, optional EventInit eventInitDict = {});

  void stopPropagation();
  void stopImmediatePropagation();
  void preventDefault();

  readonly attribute DOMString type;
  readonly attribute EventTarget? target;
  readonly attribute EventTarget? currentTarget;
  readonly attribute unsigned short eventPhase;
  readonly attribute boolean bubbles;
  readonly attribute boolean cancelable;
  readonly attribute boolean defaultPrevented;
  readonly attribute boolean composed;
}

Event Target


interface EventTarget {
  constructor();

  void addEventListener(DOMString type, EventListener? callback, optional (AddEventListenerOptions or boolean) options = {});
  void removeEventListener(DOMString type, EventListener? callback, optional (EventListenerOptions or boolean) options = {});
  boolean dispatchEvent(Event event);
};

Adding Event Listener


  void addEventListener(string type, function callback, optional options = {});


const button = document.getElementById('dataSubmitter');

button.addEventListener('click', e => {
  console.log('clicked');
});
button.addEventListener('click', e => {
  console.log('clicked second');
});

Removing Event Listener


const button = document.getElementById('dataSubmitter');

const testMethod = () => {
  console.log("first click");
};

button.addEventListener("click", testMethod);
button.addEventListener("click", () => {
  console.log("second click");
});

button.removeEventListener("click", testMethod);


// I don't work :(
button.removeEventListener("click");


// Neither do I :(
button.removeEventListener("click", () => {
  console.log("second click");
});

Event Listener List

Bubble Event

What are our options?


container.addEventListener(
  'click',
  e => {
    console.log("container capture 'click'");
  },
  {
    capture: false,
    passive: false,
    once: false,
    removed: false
  }
);

Event Phases


// Event Interface
const unsigned short NONE = 0;
const unsigned short CAPTURING_PHASE = 1; // true
const unsigned short AT_TARGET = 2; // true || false
const unsigned short BUBBLING_PHASE = 3; // false
readonly attribute unsigned short eventPhase;

Event Listener notation

[event name] ([creation order])


button.addEventListener("click", testMethod);
button.addEventListener("click", secondMethod, { capture: true });

Event Pass

Why "Capture" is called after "Bubble"?


// Current order
button.addEventListener("click", testMethod);
button.addEventListener("click", secondMethod);
button.addEventListener("click", thirdMethod, { capture: true });


// New order
button.addEventListener("click", testMethod);
button.addEventListener("click", thirdMethod, { capture: true });
button.addEventListener("click", secondMethod);

Let's stop our event!


e.stopPropagation()
e.stopImmediatePropagation()

e.stopPropagation()


button.addEventListener('click', e => {
  console.log('clicked first');
  e.stopPropagation();
});
button.addEventListener('click', e => {
  console.log('clicked second');
});
button.addEventListener(
  'click',
  e => {
    console.log("button capture 'click'");
  },
  {
    capture: true,
  }
);

e.stopImmediatePropagation()


button.addEventListener('click', e => {
  console.log('clicked first');
  e.stopImmediatePropagation();
});
button.addEventListener('click', e => {
  console.log('clicked second');
});
button.addEventListener(
  'click',
  e => {
    console.log("button capture 'click'");
  },
  {
    capture: true,
  }
);

What about "passive" and "once" event listeners?


container.addEventListener(
  'click',
  e => {
    console.log("container capture 'click'");
    e.stopPropagation();
  },
  {
    capture: false,
    passive: false,
    once: false,
    removed: false
  }
);

What about "passive" and "once" event listeners?


container.addEventListener(
  'click',
  e => {
    console.log("container capture 'click'");
    e.stopPropagation();
  },
  {
    capture: false,
    passive: true,
    once: false,
    removed: false
  }
);

What about "passive" and "once" event listeners?


container.addEventListener(
  'click',
  e => {
    console.log("container capture 'click'");
    e.stopPropagation();
  },
  {
    capture: false,
    passive: false,
    once: true,
    removed: false
  }
);

e.preventDefault()


e.preventDefault();
e.stopPropagation();

Great but can we use it somehow?

CustomEvent()


interface CustomEvent : Event {
  constructor(
        DOMString type,
        optional CustomEventInit eventInitDict = {}
  );

  readonly attribute any detail;
}

Dispatch new custom event


const clickedData = document.getElementById('clickedData');
const dataEvent = new CustomEvent('addData', {
  detail: { test: 'test2' },
});

clickedData.dispatchEvent(dataEvent);