DOM
evenemang

parametrar

Anmärkningar

Introduktion

Definition:

Vid beräkning är en händelse en handling eller händelse som erkänns av programvara som kan hanteras av programvaran. Datorhändelser kan genereras eller utlöses av systemet, av användaren eller på andra sätt. Definitionskälla

HTML-händelser är "saker" som händer med HTML-element. JavaScript kan "reagera" på dessa händelser. via Event Listeners . Dessutom kan anpassade händelser utlösas med dispatchEvent . Men detta är bara en introduktion, så låt oss komma igång!

Grundläggande händelse lyssnare

För att lyssna på händelser ringer du target.addEventListener(type, listener);

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

Detta utlöser loadImage varje gång my-button klickar på my-button .

Event lyssnarna kan bifogas till valfri nod i DOM-trädet. för att se en fullständig lista över alla händelser som nativt utlöses i webbläsaren: gå hit MDN-länk för fullständig händelselista

Ta bort evenemangets lyssnare

Metoden removeEventListener () tar bort händelseshanterare som har bifogats med metoden addEventListener ():

element.removeEventListener("mousemove", myFunction);

Allt (händelsens namn, funktion och alternativ) i removeEventListener måste matcha den uppsättningen när du lägger till händelse lyssnaren till elementet.

. Bind med removeListener

om du använder .bind på funktionen när du lägger till en händelse lyssnare kommer det att förhindra att funktionen tas bort, för att faktiskt ta bort händelsenListener kan du skriva:

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

var bindingOnEvent = onEvent.bind(this);

document.addEventListener('click', bindingOnEvent);

...

document.removeEventListener('click', bindingOnEvent);

lyssna på en händelse bara en gång

Tills en once alternativet stöds i stort måste vi ta bort den jämna lyssnaren manuellt när händelsen utlöses för första gången.

Den här lilla hjälpen hjälper oss att uppnå detta:

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

* Det är inte en bra praxis att knyta funktioner till prototypen Objekt, därför kan du ta bort den första raden i den här koden och lägga till ett mål till den som en första parametern.

Väntar på att dokumentet laddas

En av de mest använda händelserna väntar på att dokumentet har laddats, inklusive både skriptfiler och bilder. load på document används för detta.

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

Ibland försöker du komma åt ett DOM-objekt innan det laddas, vilket orsakar nollpekare. Dessa är riktigt svåra att felsöka. För att undvika detta, använd document DOMContentLoaded händelse istället. DOMContentLoaded ser till att HTML-innehållet har laddats och initialiserats utan att vänta på andra externa resurser.

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

Händelseobjekt

För att få åtkomst till händelseobjektet, inkludera en event i händelse lyssnarens återuppringningsfunktion:

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!');
});

Eftersom barnet stoppar händelseförökningen och händelserna lyssnas på under bubbelfasen kommer bara klickning på barnet att utlösa barnet. utan att stoppa spridningen kommer båda händelserna att utlösas.

e.preventDefault ();

event.preventDefault() stoppar standardåtgärden för ett element från att hända.

Till exempel:

• Förhindra att en skicka-knapp skickar in ett formulär
• Förhindra att en länk följer URL: en

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 Identifierar det aktuella målet för händelsen, eftersom händelsen går igenom DOM. Den hänvisar alltid till det element som händelseshanteraren har kopplats till i motsats till event.target som identifierar det element som händelsen inträffade på.

med andra ord

e.target returnerar det som utlöser händelseförmedlaren

e.currentTarget returnerar det du tilldelade din lyssnare till.

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

om du klickar på my-button ,

• e.target är my-button
• e.currentTarget kommer att vara body

Händelse bubblar och fångar

Händelser som avfyras på DOM-element påverkar inte bara elementet de riktar sig till. Någon av målets förfäder i DOM kan också ha en chans att reagera på händelsen. Tänk på följande dokument:

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

Om vi bara lägger till lyssnare till varje element utan några alternativ, utlöser du ett klick på spännvidden ...

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

... då kommer händelsen att bubbla upp genom varje förfader och utlösa varje klickhanterare på vägen:

Text clicked!
Paragraph clicked!
Body clicked!

Om du vill att en av dina hanterare ska stoppa händelsen från att utlösa fler hanterare kan den ringa event.stopPropagation() . Om vi till exempel ersätter vår andra händelseshanterare med detta:

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

Vi skulle se följande utdata, med body är click handler aldrig utlöses:

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

Slutligen har vi möjligheten att lägga till händelse lyssnare som utlöser under " capture " istället för att bubbla. Innan en händelse bubblar upp från ett element genom sina förfäder, "fångas" det först ner till elementet genom dess förfäder. En fångar lyssnar läggs till genom att ange true eller {capture: true} som det tredje argumentet som tillval till addEventListener . Om vi lägger till följande lyssnare till vårt första exempel ovan:

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

Vi får följande utgång:

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

Som standard lyssnar händelser på i den bubblande fasen. För att ändra detta kan du ange vilken fas händelsen lyssnar på genom att ange den tredje parametern i addEventListener-funktionen. (För att lära dig att fånga och bubbla, kolla kommentarer )

element.addEventListener(eventName, eventHandler, useCapture)

useCapture: true betyder att lyssna på händelsen när det går ner i DOM-trädet. false betyder att lyssna på händelsen medan den går upp i DOM-trädet.

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

Varningslådorna dyker upp i denna ordning:

• 2: vid fångst
• 1: på bubbla

Ärenden i verklig värld

Capture Event kommer att skickas före Bubble Event, därför kan du se till att en händelse lyssnas på först om du lyssnar på den i dess fångningsfas.

om du lyssnar på en klickhändelse på ett förälderelement och ett annat på dess barn kan du lyssna på barnet först eller föräldern först, beroende på hur du ändrar parametern useCapture.

i bubblande, barnhändelse kallas först, i fångst, förälder först

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

Att ställa in riktigt för förälderhändelsenListener utlöser först föräldrarens lyssnare.

I kombination med e.stopPropagation () kan du förhindra att händelsen utlöser lyssnaren till barnhändelsen / eller föräldern. (mer om det i nästa exempel)

Delegation av evenemang

Arrangemangsdelegering är en process som gör att vi kan undvika att lägga till händelselister till specifika noder; istället läggs händelse lyssnaren till föräldernoden. Denna mekanism använder händelseförökningen / bubblan för att hantera en händelse vid en högre nivåelement / nod i DOM istället för att använda elementet på vilket händelsen har sitt ursprung. Tänk till exempel att vi måste lägga till händelser för följande listelement:

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

Vi behöver lägga till click hanterare och i princip kan vi lägga lyssnare till varje element med hjälp av en slinga, men föreställa sig att vi vill lägga till element dynamiskt. Så vi registrerar alla händelseshanterare när DOM laddas och efter att DOM initierar och registrerar alla händelseshanterare för varje element kommer det nyinförda elementet i UL ovan inte att svara på klick eftersom det elementet inte fanns i DOM när vi har registrerat klickhändelserna.

Så för att övervinna detta problem kan vi utnyttja delegationen av evenemanget. Vilket innebär att vi istället för att registrera lyssnarna till varje li element själva, kan vi binda händelsets lyssnare till det överordnade UL elementet till exempel:

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

Eftersom händelsen förökas (bubblar uppåt) som standard, klickar du på något LI element kommer UL elementet att avfyra samma händelse också. I det här fallet kan vi använda e parametern i funktionen, som faktiskt är händelseobjektet och det innehåller användbar information om händelsen inklusive det ursprungliga elementet, som initierade händelsen. Så vi kan till exempel använda något av följande:

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!");
    }
});

Så det är uppenbart att e (Event Object) tillåter oss att undersöka källelementet (e.target) och vi kan enkelt injicera nya element till UL efter att DOM har laddats och den enda delegerade händelseshanteraren hanterar alla klickhändelser inom moder- UL som också är mindre minneskrävande eftersom vi bara förklarade en funktion för alla element.

Aktivera anpassade händelser

CustomEvent API tillåter utvecklare att skapa anpassade händelser och utlösa dem på DOM-noder och skicka data längs vägen.

event = new CustomEvent(typeArg, customEventInit);

typArg - DOMString som representerar namnet på händelsen.

customEventInit - är valfria parametrar (som kommer att skickas som e i följande exempel).

Du kan bifoga eventListeners till document eller något HTML-element.

När en anpassad händelse har lagts till och bundits till element (eller dokument) kanske man vill avfyra den manuellt från 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);