DOM
Evenementen

parameters

Opmerkingen

Invoering

Definitie:

Bij computergebruik is een gebeurtenis een door software herkende actie of gebeurtenis die door de software kan worden afgehandeld. Computergebeurtenissen kunnen door het systeem, door de gebruiker of op andere manieren worden gegenereerd of geactiveerd. Definitie Bron

HTML-gebeurtenissen zijn "dingen" die HTML-elementen overkomen. JavaScript kan op deze gebeurtenissen "reageren". via Event Listeners . Bovendien kunnen aangepaste gebeurtenissen worden geactiveerd met dispatchEvent . Maar dit is slechts een inleiding, dus laten we beginnen!

Basic Event-luisteraar

Als u naar gebeurtenissen wilt luisteren, roept u target.addEventListener(type, listener);

function loadImage() {
  console.log('image code here!');
}
var myButton = document.querySelector('#my-button');
myButton.addEventListener('click', loadImage);

Dit zal loadImage activeren telkens wanneer op my-button wordt geklikt.

Eventlisteners kunnen aan elk knooppunt in de DOM-structuur worden gekoppeld. voor een volledige lijst met alle gebeurtenissen die native in de browser zijn geactiveerd: ga hier MDN-link voor de volledige lijst met gebeurtenissen

Gebeurtenisluisteraars verwijderen

De methode removeEventListener () verwijdert gebeurtenishandlers die zijn gekoppeld met de methode addEventListener ():

element.removeEventListener("mousemove", myFunction);

Alles (gebeurtenisnaam, functie en opties) in de removeEventListener moet overeenkomen met de set die is ingesteld bij het toevoegen van de gebeurtenislistener aan het element.

.binden met removeListener

het gebruik van .bind bij de functie bij het toevoegen van een gebeurtenislistener, voorkomt dat de functie wordt verwijderd, om de eventListener te verwijderen die u kunt schrijven:

function onEvent() {
   console.log(this.name);
}

var bindingOnEvent = onEvent.bind(this);

document.addEventListener('click', bindingOnEvent);

...

document.removeEventListener('click', bindingOnEvent);

luister maar één keer naar een evenement

Totdat de optie once breed wordt ondersteund, moeten we de even luisteraar handmatig verwijderen zodra de gebeurtenis voor de eerste keer wordt geactiveerd.

Deze kleine helper zal ons helpen dit te bereiken:

Object.prototype.listenOnce = Object.prototype.listenOnce ||
  function listenOnce(eventName, eventHandler, options) {
      var target = this;
      target.addEventListener(eventName, function(e) {
          eventHandler(e);
          target.removeEventListener(eventName, eventHandler, options);
      }, options);
  }

var target = document.querySelector('#parent');
target.listenOnce("click", clickFunction, false);

* Het is geen best practice om functies aan het prototype Object te koppelen, daarom kunt u de eerste regel van deze code verwijderen en er een doel aan toevoegen als eerste parameter.

Wachten tot het document is geladen

Een van de meest gebruikte gebeurtenissen wacht op het laden van het document, inclusief scriptbestanden en afbeeldingen. load gebeurtenis load op document gebruikt.

document.addEventListener('load', function() {
   console.log("Everything has now loaded!");
});

Soms probeert u toegang te krijgen tot een DOM-object voordat het wordt geladen, waardoor null-wijzers worden veroorzaakt. Deze zijn echt moeilijk te debuggen. Gebruik in plaats hiervan de DOMContentLoaded gebeurtenis van het document . DOMContentLoaded zorgt ervoor dat de HTML-inhoud is geladen en geïnitialiseerd zonder te wachten op andere externe bronnen.

document.addEventListener('DOMContentLoaded', function() {
   console.log("The document contents are now available!");
});

Evenement Object

Om toegang te krijgen tot het gebeurtenisobject, neemt u een event in de callback-functie voor gebeurtenislistener:

var foo = document.getElementById("foo");
foo.addEventListener("click", onClick);

function onClick(event) {
  // the `event` parameter is the event object
  // e.g. `event.type` would be "click" in this case
};

e.stopPropagation ();

HTML:

<div id="parent">
   <div id="child"></div>
</div>

javascript:

var parent = document.querySelector('#parent');
var child = document.querySelector('#child');

child.addEventListener('click', function(e) {
   e.stopPropagation();
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
});

omdat het kind de propagatie van de gebeurtenis stopt en naar de gebeurtenissen wordt geluisterd tijdens het borrelen, zal het klikken op het kind alleen het kind activeren. zonder de verspreiding te stoppen, worden beide gebeurtenissen geactiveerd.

e.preventDefault ();

De methode event.preventDefault() stopt de standaardactie van een element.

Bijvoorbeeld:

• Voorkom dat een verzendknop een formulier verzendt
• Voorkom dat een link de URL volgt

var allAnchorTags = document.querySelector('a');

allAnchorTags.addEventListener('click', function(e){
    e.preventDefault();
    console.log('anchor tags are useless now! *evil laugh*');
});

e.target vs e.currentTarget

e.currentTarget Identificeert het huidige doel voor de gebeurtenis, terwijl de gebeurtenis de DOM doorloopt. Het verwijst altijd naar het element waaraan de gebeurtenishandler is gekoppeld en niet naar event.target dat het element identificeert waarop de gebeurtenis plaatsvond.

met andere woorden

e.target geeft terug wat de gebeurtenisverzender activeert om te activeren

e.currentTarget geeft terug waaraan u uw luisteraar hebt toegewezen.

HTML:

<body>
   <button id="my-button"></button>
</body>

javascript:

var body = document.body;
body.addEventListener( 'click', function(e) {
    console.log('e.target', e.target);
    console.log('e.currentTarget', e.currentTarget);
});

als je op my-button ,

• e.target is my-button
• e.currentTarget zal body

Even borrelen en vastleggen van gebeurtenissen

Gebeurtenissen die op DOM-elementen worden afgevuurd, hebben niet alleen invloed op het element waarop ze zich richten. Alle voorouders van het doelwit in het DOM kunnen ook een kans krijgen om op het evenement te reageren. Beschouw het volgende document:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
  <p id="paragraph">
    <span id="text">Hello World</span>
  </p>
</body>
</html>

Als we gewoon luisteraars aan elk element toevoegen zonder opties, activeer dan een klik op de reeks ...

document.body.addEventListener('click', function(event) {
  console.log("Body clicked!");
});
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked!");
});
window.text.addEventListener('click', function(event) {
  console.log("Text clicked!");
});

window.text.click();

... en het programma gaat borrelen door elke voorouder, triggering elke klik handler onderweg:

Text clicked!
Paragraph clicked!
Body clicked!

Als u wilt dat een van uw handlers ervoor event.stopPropagation() de gebeurtenis geen handlers meer activeert, kan deze de methode event.stopPropagation() aanroepen. Als we bijvoorbeeld onze tweede event-handler vervangen door:

window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph clicked, and that's it!");
  event.stopPropagation();
});

We zouden de volgende uitvoer zien, met de click handler van de body nooit geactiveerd:

Text clicked!
Paragraph clicked, and that's it!

Tot slot hebben we de optie om event-listeners toe te voegen die worden geactiveerd tijdens " vastleggen " in plaats van borrelen. Voordat een gebeurtenis uit een element via zijn voorouders opborrelt, wordt het eerst "vastgelegd" tot aan het element via zijn voorouders. Een vastleggende luisteraar wordt toegevoegd door true of {capture: true} als optioneel derde argument voor addEventListener . Als we de volgende luisteraars toevoegen aan ons eerste voorbeeld hierboven:

document.body.addEventListener('click', function(event) {
  console.log("Body click captured!");
}, true);
window.paragraph.addEventListener('click', function(event) {
  console.log("Paragraph click captured!");
}, true);
window.text.addEventListener('click', function(event) {
  console.log("Text click captured!");
}, true);

We krijgen de volgende uitvoer:

Body click captured!
Paragraph click captured!
Text click captured!
Text clicked!
Paragraph clicked!
Body clicked!

Standaard wordt naar gebeurtenissen geluisterd in de bubbelfase. Om dit te wijzigen, kunt u opgeven naar welke fase naar de gebeurtenis wordt geluisterd door de derde parameter op te geven in de functie addEventListener. (Bekijk opmerkingen over het vastleggen en borrelen)

element.addEventListener(eventName, eventHandler, useCapture)

useCapture: true betekent luisteren naar een gebeurtenis wanneer deze in de DOM-structuur naar beneden gaat. false betekent luisteren naar de gebeurtenis terwijl deze omhoog gaat in de DOM-structuur.

window.addEventListener("click", function(){alert('1: on bubble')}, false);
window.addEventListener("click", function(){alert('2: on capture')}, true);

De waarschuwingsvakken verschijnen in deze volgorde:

• 2: bij opname
• 1: op bubbel

Real-world use cases

Capture Event wordt vóór Bubble Event verzonden, dus u kunt ervoor zorgen dat er eerst naar een evenement wordt geluisterd als u ernaar luistert in de opnamefase.

als u luistert naar een klikgebeurtenis op een ouderelement en een andere op het onderliggende element, kunt u eerst naar het kind of de ouder luisteren, afhankelijk van hoe u de parameter useCapture wijzigt.

bij borrelen wordt het kindgebeurtenis eerst genoemd, bij het vangen, eerst de ouder

HTML:

<div id="parent">
   <div id="child"></div>
</div>

javascript:

child.addEventListener('click', function(e) {
   alert('child clicked!');
});

parent.addEventListener('click', function(e) {
   alert('parent clicked!');
}, true);

Als u true instelt op de bovenliggende gebeurtenis, wordt de bovenliggende listener eerst geactiveerd.

In combinatie met e.stopPropagation () kunt u voorkomen dat de gebeurtenis de luisteraar van de onderliggende gebeurtenis / of de ouder activeert. (meer daarover in het volgende voorbeeld)

Delegatie van evenementen

Gebeurtenisdelegatie is een proces waarmee we voorkomen dat gebeurtenisluisteraars aan specifieke knooppunten worden toegevoegd; in plaats daarvan wordt de gebeurtenislistener aan het bovenliggende knooppunt toegevoegd. Dit mechanisme maakt gebruik van de gebeurtenispropagatie / borrelen om een gebeurtenis op een hoger niveau element / knooppunt in de DOM af te handelen in plaats van het element te gebruiken waarop de gebeurtenis is ontstaan. Denk bijvoorbeeld dat we evenementen moeten toevoegen voor de volgende lijstelementen:

<ul id="container">
    <li id="item-1" class="new">Item 1</li>
    <li id="item-2">Item 2</li>
    <li id="item-3">Item 3</li>
</ul>

We moeten click handlers toevoegen en in principe kunnen we luisteraars aan elk element toevoegen met behulp van een lus, maar stel je voor dat we dynamisch elementen willen toevoegen. We registreren dus alle event-handlers wanneer de DOM wordt geladen en nadat de DOM alle event-handlers voor elk element initialiseert en registreert, reageert het nieuw ingevoegde element in de bovenstaande UL niet bij de klik, omdat dat element niet aanwezig was in de DOM wanneer we de click event-luisteraars hebben geregistreerd.

Dus, om dit probleem op te lossen, kunnen we de evenementdelegatie gebruiken. Dit betekent dat we, in plaats van de luisteraars te registreren voor elke li elementen zelf, de gebeurtenislistener kunnen binden aan het bovenliggende UL element, bijvoorbeeld:

document.getElementById("container").addEventListener("click", function(e) {
    console.log("List item " e.target.id, " was clicked!");
});

Omdat de gebeurtenis zich standaard voortplant (omhoog borrelt), en vervolgens op een LI element klikken, zorgt het UL element ervoor dat dezelfde gebeurtenis ook wordt geactiveerd. In dit geval kunnen we de parameter e in de functie, die feitelijk het gebeurtenisobject is en nuttige informatie over de gebeurtenis bevat, inclusief het oorspronkelijke element dat de gebeurtenis heeft geïnitieerd. Dus we kunnen bijvoorbeeld zoiets als het volgende gebruiken:

document.getElementById("container").addEventListener("click", function(e) {

    // If UL itself then no action is require
    if(e.target.nodeName == 'UL') return false;

    if(e.target.classList.contains('new')) {
        console.log("List item " e.target.id, " was clicked and it's new!");
    }
});

Het is dus duidelijk dat we met e (Event Object) het bronelement (e.target) kunnen onderzoeken en we gemakkelijk nieuwe elementen in de UL kunnen injecteren nadat DOM is geladen en de enige gedelegeerde event-handler alle click-events afhandelt binnen de bovenliggende UL die ook minder geheugen verbruikt omdat we slechts één functie voor alle elementen hebben aangegeven.

Aangepaste gebeurtenissen activeren

Met de CustomEvent API kunnen ontwikkelaars aangepaste evenementen maken en deze activeren op DOM-knooppunten, waarbij gegevens onderweg worden doorgegeven.

event = new CustomEvent(typeArg, customEventInit);

typeArg - DOMString die de naam van de gebeurtenis vertegenwoordigt.

customEventInit - zijn optionele parameters (die in het volgende voorbeeld als e worden doorgegeven).

U kunt eventListeners aan een document of elk HTML-element toevoegen.

Als een aangepaste gebeurtenis is toegevoegd en is gebonden aan een element (of document), wilt u deze misschien handmatig activeren vanuit JavaScript.

document.addEventListener("event-name", function(e) {
  console.log(e.detail); // logs custom object passed from the event.
});

var event = new CustomEvent("event-name", { "param-name": "param-value" });
document.dispatchEvent(event);