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);
					

Let's fix our event


new CustomEvent('addData', {
  bubbles: true,
  detail: { test: 'test2' },
});
					

When we might want to use custom events?


{...}
{...}

When we might want to use custom events?


{...}
{...}
{
  message: "Hi, 5 o'clock beer today?",
  sender: "John Brown"
}




					

When we might want to use custom events?


{...}
{...}
{
  message: "Hi, 5 o'clock beer today?",
  sender: "John Brown",
  isCurrentUser: false
}



					

When we might want to use custom events?


{...}
{...}
{
  message: "Hi, 5 o'clock 🍺 today?",
  sender: "John Brown",
  isCurrentUser: false,
  conversationId: "4GDFj;g72hKK"
}


					

When we might want to use custom events?


{...}
{...}
{
  message: "Hi, 5 o'clock 🍺 today?",
  sender: "John Brown",
  isCurrentUser: false,
  conversationId: "4GDFj;g72hKK",
  isDisplayed: true,
  date: 1234567890
}
					

When we might want to use custom events?


{...}
{...}

{
  message: "Hi, 5 o'clock 🍺 today?",
  sender: "John Brown",
  isCurrentUser: false,
  conversationId: "4GDFj;g72hKK",
  isDisplayed: true,
  date: 1234567890
}
					

When we might want to use custom events?


{...}
{...}

{
  message: "Hi, 5 o'clock 🍺 today?",
  sender: "John Brown",
  isCurrentUser: false,
  conversationId: "4GDFj;g72hKK",
  isDisplayed: true,
  date: 1234567890
}
					

When we might want to use custom events?


{...}
{...}

{
  message: "Hi, 5 o'clock 🍺 today?",
  sender: "John Brown",
  isCurrentUser: false,
  conversationId: "4GDFj;g72hKK",
  isDisplayed: true,
  date: 1234567890
}
					

AngularJS "like" Event Broadcasting...

Thanks

Questions?

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