Event Listener

image.addEventListener('load', function(e) { newPhotoIsDoneLoading(e); }, false);

document.ontouchstart = function(e){  }

element.onclick.addListener((event) => {})

element.onclick = function () {}

window.onload = function () {}

window.removeEventListener("keydown", handlerFunction);

event.preventDefault();

if (event.cancelable) {
  event.preventDefault();
}

const grandparent = document.querySelector(".grandparent")
const parent = document.querySelector(".parent")
const child = document.querySelector(".child")

grandparent.addEventListener("click",
  e => {
    // ...
  },
  { capture: true }
)

grandparent.addEventListener("click", 
  e => {
    e.stopPropagation()
  },
  { capture: true }
)

grandparent.addEventListener("click", 
  e => {
    // ...
  },
  { once: true }
)

event.stopPropagation();

var target = event.target;
console.log(target.classname);

document.addEventListener("DOMContentLoaded", function(){
    //....
});

window.addEventListener("load", function(){
    // ....
});

window.addEventListener("pageshow", () => {  });
window.addEventListener("pagehide", () => {  });

section.addEventListener("mousedown", function(e) { handleTouchEnd(e); }, false);
section.addEventListener("mouseup", function(e) { handleTouchStart(e); }, false);

window.addEventListener("touchstart", function(e){ handleTouchEvent(e); })

function handleTouchEvent(e) {
    var touchXAxis = e.target.pageX;
}

section.addEventListener("touchstart", function(e) { handleTouchStart(e); }, false);
section.addEventListener("touchmove", function(e) { handleTouchMove(e); }, false);
section.addEventListener("touchend", function(e) { handleTouchEnd(e); }, false);

canvas.addEventListener("pointerdown", startPointer)
canvas.addEventListener("pointermove", movingPointer)
canvas.addEventListener("pointerup",   endPointer)

function startPointer(e) {

}
function endPointer(e) {

}
function movingPointer(e) {
  const coords = {
    client: { x: e.clientX, y: e.clientY },
    offset: { x: e.offsetX, y: e.offsetY },
    page: { x: e.pageX, y: e.pageY },
    screen: { x: e.screenX, y: e.screenY },
    movement: { x: e.movementX, y: e.movementY },
    e: { x: e.x, y: e.y },
  }
  console.table(coords)
  
  console.log(e.pressure, e.webkitForce)
  console.log(e.altitudeAngle, "", e.azimuthAngle, e.tiltX, e.tiltY)
}

window.addEventListener("keydown", function(e){ handleKeyboardEvent(e); })
window.addEventListener("keypress", function(e){ handleKeyboardEvent(e); })

function handleKeyboardEvent(e) {
if (e.keyCode === 39) {
    // ...
}

function eventHandler(e) {
   console.log(e) // this is the event object
}

document.ontouchstart = function(e){
        e.preventDefault();
}

document.addEventListener("click", function(e){
        e.stopPropagation();
}

e.target.parentNode.className

e.offsetX
e.offsetY

e.pageX
e.pageY

e.layerX
e.layerY

e.clientX
e.clientY

e.screenX
e.screenY

preventDefault()
stopPropagation()
stopImmediatePropagation()
target
timeStamp

clientX     // horizontal coordinate relative to the current window, when event was triggered
clientY
MovementX   // horizontal coordinate relative to the position of the last mousemove event
MovementY
offsetX     // horizontal coordinate relative to the position of the edge of the target element
offsetY
pageX       // horizontal coordinate elative to the document, when event was triggered
pageY
screenX     // horizontal coordinate relative to the screen, when event was triggered
screenY

clientX     // horizontal coordinate relative to the current window
clientY
touches     // list of all touch objects on the surface
targetTouches   // list of all the touch objects that are in contact with the surface and where the touchstart event occured on the same target element as the current target element
changedTouches  // list of all the touch objects whose state changed since the previous touch

code    //
key     // key value
keyCode // Unicode character code of the key
repeat

clipboardData

deltaX
deltaX
deltaX
deltaMode  // pixels, lines or pages

const element = document.querySelector(".element");

element.dispatchEvent(new CustomEvent("somethingchanged", { detail: this.value }));
element.dispatchEvent(new CustomEvent("somethingchanged", { bubbles: true, cancelable: true, detail: this.value }));

element.addEventListener("somethingchanged", (e) => console.log(e.detail));
element.addEventListener("somethingchanged", ({ detail }) => console.log(detail));

function simulateClick() {
  const event = new MouseEvent("click", {
    view: window,
    bubbles: true,
    cancelable: true,
  });
  const cb = document.getElementById("checkbox");
  const cancelled = !cb.dispatchEvent(event);

  if (cancelled) {
    console.log("cancelled: A handler called preventDefault.");
  } else {
    console.log("not cancelled: None of the handlers called preventDefault.");
  }
}