#16 JavaScript Code Snippets: Event Handling

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 () => console.log("Clicked")
);

btn.click();

click() programmatically triggers the click event.

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 () => console.log("A")
);

btn.addEventListener(
 "click",
 () => console.log("B")
);

btn.click();

Listeners execute in registration order.

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 event => {
   console.log(
     typeof event
   );
 }
);

btn.click();

The browser passes an Event object.

const btn =
 document.createElement("button");

btn.id = "saveBtn";

btn.addEventListener(
 "click",
 event => {
   console.log(
     event.target.id
   );
 }
);

btn.click();

target refers to the element that triggered the event.

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 event => {
   console.log(
     event.currentTarget === btn
   );
 }
);

btn.click();

currentTarget is the element owning the listener.

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 function() {
   console.log(
     this === btn
   );
 }
);

btn.click();

In a regular event handler, this refers to the element.

const input =
 document.createElement("input");

input.value = "React";

input.addEventListener(
 "input",
 e => {
   console.log(
     e.target.value
   );
 }
);

input.dispatchEvent(
 new Event("input")
);

The input event reads the current value.

const input =
 document.createElement("input");

input.addEventListener(
 "change",
 () => {
   console.log("Changed");
 }
);

input.dispatchEvent(
 new Event("change")
);

dispatchEvent triggers the change event.

const input =
 document.createElement("input");

input.addEventListener(
 "keyup",
 e => {
   console.log(
     e.type
   );
 }
);

input.dispatchEvent(
 new Event("keyup")
);

type contains the current event name.

const input =
 document.createElement("input");

input.addEventListener(
 "keydown",
 e => {
   console.log(
     e.type
   );
 }
);

input.dispatchEvent(
 new Event("keydown")
);

keydown event is dispatched manually.

const input =
 document.createElement("input");

input.value = "JS";

input.addEventListener(
 "input",
 e => {
   console.log(
     e.target.value.length
   );
 }
);

input.dispatchEvent(
 new Event("input")
);

"JS" contains two characters.

const form =
 document.createElement("form");

form.addEventListener(
 "submit",
 () => {
   console.log("Submitted");
 }
);

form.dispatchEvent(
 new Event("submit")
);

The submit event is triggered programmatically.

const form =
 document.createElement("form");

form.addEventListener(
 "submit",
 event => {
   event.preventDefault();

   console.log(
     event.defaultPrevented
   );
 }
);

form.dispatchEvent(
 new Event(
   "submit",
   { cancelable: true }
 )
);

preventDefault marks the event as prevented.

const btn =
 document.createElement("button");

btn.type = "submit";

console.log(
 btn.type
);

The button type was explicitly assigned.

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 () => console.log("A")
);

console.log("B");

btn.click();

Normal synchronous code runs before click() is called.

const div =
 document.createElement("div");

div.addEventListener(
 "mouseenter",
 e => {
   console.log(e.type);
 }
);

div.dispatchEvent(
 new Event("mouseenter")
);

The dispatched event type is mouseenter.

const div =
 document.createElement("div");

div.addEventListener(
 "mouseleave",
 e => {
   console.log(e.type);
 }
);

div.dispatchEvent(
 new Event("mouseleave")
);

The event type is mouseleave.

const div =
 document.createElement("div");

div.addEventListener(
 "mouseover",
 e => {
   console.log(e.type);
 }
);

div.dispatchEvent(
 new Event("mouseover")
);

The listener receives a mouseover event.

const div =
 document.createElement("div");

div.addEventListener(
 "mouseout",
 e => {
   console.log(e.type);
 }
);

div.dispatchEvent(
 new Event("mouseout")
);

The event type is mouseout.

const btn =
 document.createElement("button");

btn.addEventListener(
 "dblclick",
 () => {
   console.log("Double");
 }
);

btn.dispatchEvent(
 new Event("dblclick")
);

The dblclick listener executes.

const event =
 new KeyboardEvent(
   "keydown",
   {
     key: "Enter"
   }
 );

console.log(
 event.key
);

event.key returns the key value.

const event =
 new KeyboardEvent(
   "keyup"
 );

console.log(
 event.type
);

The event type is keyup.

const event =
 new KeyboardEvent(
   "keydown",
   {
     key: "Enter"
   }
 );

console.log(
 event.key === "Enter"
);

The key value is Enter.

const event =
 new KeyboardEvent(
   "keydown",
   {
     key: "A"
   }
 );

console.log(
 event.key
);

key returns the actual key value.

const event =
 new KeyboardEvent(
   "keydown",
   {
     code: "KeyA"
   }
 );

console.log(
 event.code
);

code returns the physical key identifier.

function show() {
  console.log("JS");
}

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 show
);

btn.click();

The handler executes when click() is called.

function show() {
  console.log("JS");
}

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 show
);

btn.removeEventListener(
 "click",
 show
);

btn.click();

The listener was removed successfully.

let count = 0;

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 () => {
   count++;
 },
 { once: true }
);

btn.click();
btn.click();

console.log(count);

once removes the listener after the first execution.

const options = {
  passive: true
};

console.log(
 options.passive
);

passive is enabled.

const options = {
  capture: true
};

console.log(
 options.capture
);

capture is enabled.

const parent =
 document.createElement("div");

const child =
 document.createElement("button");

parent.appendChild(child);

parent.addEventListener(
 "click",
 () => console.log("Parent")
);

child.addEventListener(
 "click",
 () => console.log("Child")
);

child.click();

Click events bubble from child to parent.

const parent =
 document.createElement("div");

const child =
 document.createElement("button");

parent.appendChild(child);

parent.addEventListener(
 "click",
 () => console.log("Parent")
);

child.addEventListener(
 "click",
 e => {
   e.stopPropagation();
   console.log("Child");
 }
);

child.click();

stopPropagation prevents bubbling.

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 e => {
   e.stopImmediatePropagation();
   console.log("A");
 }
);

btn.addEventListener(
 "click",
 () => console.log("B")
);

btn.click();

Remaining listeners on the same element are skipped.

const list =
 document.createElement("ul");

const item =
 document.createElement("li");

list.appendChild(item);

list.addEventListener(
 "click",
 e => {
   console.log(
     e.target.tagName
   );
 }
);

item.click();

The clicked element is the target.

const list =
 document.createElement("ul");

const item =
 document.createElement("li");

list.appendChild(item);

list.addEventListener(
 "click",
 e => {
   console.log(
     e.currentTarget.tagName
   );
 }
);

item.click();

currentTarget is where the listener is attached.

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 () => console.log("A")
);

btn.addEventListener(
 "click",
 () => console.log("B")
);

btn.click();

Listeners run in registration order.

const parent =
 document.createElement("div");

const child =
 document.createElement("button");

parent.appendChild(child);

parent.addEventListener(
 "click",
 () => console.log("Parent"),
 true
);

child.addEventListener(
 "click",
 () => console.log("Child")
);

child.click();

Capture listeners run before target listeners.

function handler() {
  console.log("JS");
}

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 handler
);

btn.removeEventListener(
 "click",
 handler
);

btn.click();

The same function reference is removed.

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 () => console.log("JS")
);

btn.removeEventListener(
 "click",
 () => console.log("JS")
);

btn.click();

Different arrow functions are different references.

const event =
 new Event("click");

console.log(
 event.type
);

The event type is click.

const btn =
 document.createElement("button");

btn.addEventListener(
 "click",
 () => console.log("Clicked")
);

btn.dispatchEvent(
 new Event("click")
);

dispatchEvent triggers matching listeners.

const event =
 new CustomEvent(
   "login",
   {
     detail: {
       user: "JS"
     }
   }
 );

console.log(
 event.detail.user
);

CustomEvent stores custom data in detail.

const btn =
 document.createElement("button");

btn.addEventListener(
 "save",
 e => {
   console.log(
     e.type
   );
 }
);

btn.dispatchEvent(
 new Event("save")
);

Custom event names work with dispatchEvent.

const list =
 document.createElement("ul");

const item1 =
 document.createElement("li");

const item2 =
 document.createElement("li");

item2.textContent = "Two";

list.append(
 item1,
 item2
);

list.addEventListener(
 "click",
 e => {
   console.log(
     e.target.textContent
   );
 }
);

item2.click();

Delegation can determine which child triggered the event.

const parent =
 document.createElement("div");

const child =
 document.createElement("button");

parent.appendChild(child);

parent.addEventListener(
 "click",
 () => console.log("Capture"),
 true
);

parent.addEventListener(
 "click",
 () => console.log("Bubble")
);

child.addEventListener(
 "click",
 () => console.log("Target")
);

child.click();

Event flow is Capture Phase → Target Phase → Bubble Phase.