JS - Event properties

Poznajemy properties klasy Event, której wielokrotnie używaliśmy i najwyższa pora lepiej ją zrozumieć. Do dzieła.

e.target: to już znamy. Element, który odpalił event w swojej target phase.

e.currentTarget: też znamy. Element, do którego jest przypięty event listener (odpalić zaś mógł element-dziecko)

e.defaultPrevented: bool, który pokazuje, czy preventDefault zostało użyte, czy nie. Przykład z MDN:

<p><a id="link1" href="#link1">Visit link 1</a></p>
<p><a id="link2" href="#link2">Try to visit link 2</a> (you can't)</p>
<p id="log"></p>

function stopLink(event) {
  event.preventDefault();
}

function logClick(event) {
  const log = document.getElementById("log");

  if (event.target.tagName === "A") {
    log.innerText = event.defaultPrevented
      ? `Sorry, but you cannot visit this link!\n${log.innerText}`
      : `Visiting link…\n${log.innerText}`;
  }
}

const a = document.getElementById("link2");
a.addEventListener("click", stopLink);
document.addEventListener("click", logClick);

e.eventPhase: Faza eventu wyrażona liczbowo. 0 to None, 1 to capture phase, 2 to AT_TARGET, 3 to bubble phase.

e.type: nic innego jak nazwa eventu. Przykład z MDN:

<p>Press any key or click the mouse to get the event type.</p>
<p id="log"></p>

function getEventType(event) {
  const log = document.getElementById("log");
  log.innerText = `${event.type}\n${log.innerText}`;
}

// Keyboard events
document.addEventListener("keydown", getEventType, false); // first
document.addEventListener("keypress", getEventType, false); // second
document.addEventListener("keyup", getEventType, false); // third

// Mouse events
document.addEventListener("mousedown", getEventType, false); // first
document.addEventListener("mouseup", getEventType, false); // second
document.addEventListener("click", getEventType, false); // third

Warto sobie wypróbować, aby ogarnąć kolejność różnych eventów, ale tak, nie typ, tylko nazwa.

e.timestap: kiedy utworzono event, UNIX timestamp.

e.bubbles: czy event bąbelkuje (propaguje wzwyż, pamiętajmy, że jest też propagacja wszerz)

e.composed: jeżeli nie bąbelkuje, to nie ma znaczenia. W przypadku, gdy bąbelkuje, określa, czy odpalony w shadow DOMie wybąbelkuje poza swój shadow DOM.

e.cancelable: czy można na evencie zawołać preventDefault, czy nie.

JS – Event properties