jQuery => Evenementen

Opmerkingen

jQuery verwerkt gebeurtenissen intern via de functie addEventListener . Dit betekent dat het volkomen legaal is om meer dan één functie gebonden te hebben aan dezelfde gebeurtenis voor hetzelfde DOM-element.

Eventhandlers koppelen en ontkoppelen

Bevestig een gebeurtenishandler

Sinds versie 1.7 heeft jQuery de event API .on() . Op deze manier kan elke standaard javascript-gebeurtenis of aangepaste gebeurtenis worden gebonden aan het momenteel geselecteerde jQuery-element. Er zijn snelkoppelingen zoals .click() , maar .on() biedt meer opties.

HTML

<button id="foo">bar</button>

jQuery

$( "#foo" ).on( "click", function() {
  console.log( $( this ).text() ); //bar
});

Maak een gebeurtenishandler los

Natuurlijk hebt u ook de mogelijkheid om gebeurtenissen los te maken van uw jQuery-objecten. U doet dit met .off( events [, selector ] [, handler ] ) .

HTML

<button id="hello">hello</button>

jQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off();
});

Wanneer u op de knop $(this) klikt, verwijst dit naar het huidige jQuery-object en worden alle gekoppelde eventhandlers ervan verwijderd. U kunt ook opgeven welke gebeurtenishandler moet worden verwijderd.

jQuery

$('#hello').on('click', function(){
    console.log('hello world!');
    $(this).off('click');
});

$('#hello').on('mouseenter', function(){
    console.log('you are about to click');
});

In dit geval zal de mouseenter gebeurtenis na het klikken nog steeds werken.

Gedelegeerde evenementen

Laten we beginnen met een voorbeeld. Hier is een heel eenvoudige voorbeeld-HTML.

Voorbeeld HTML

<html>
    <head>
    </head>
    <body>
        <ul>
            <li>
                <a href="some_url/">Link 1</a>
            </li>
            <li>
                <a href="some_url/">Link 2</a>
            </li>
            <li>
                <a href="some_url/">Link 3</a>
            </li>
        </ul>
    </body>
</html>

Het probleem

In dit voorbeeld willen we nu een gebeurtenislistener toevoegen aan alle <a> elementen. Het probleem is dat de lijst in dit voorbeeld dynamisch is. <li> elementen worden toegevoegd en verwijderd naarmate de tijd verstrijkt. De pagina wordt echter niet vernieuwd tussen de wijzigingen door, waardoor we eenvoudige klikgebeurtenis-luisteraars kunnen gebruiken voor de koppelingsobjecten (bijvoorbeeld $('a').click() ).

Het probleem dat we hebben is hoe we evenementen kunnen toevoegen aan de <a> elementen die komen en gaan.

Achtergrondinformatie - Evenementpropagatie

Gedelegeerde gebeurtenissen zijn alleen mogelijk vanwege propagatie van gebeurtenissen (vaak gebeurtenisbellen genoemd). Telkens wanneer een gebeurtenis wordt geactiveerd, zal deze helemaal omhoog borrelen (naar de documenthoofdmap). Ze delegeren de afhandeling van een gebeurtenis aan een niet-veranderend voorouderelement, vandaar de naam "gedelegeerde" gebeurtenissen.

Dus in het bovenstaande voorbeeld, zal het klikken op <a> element link de 'klik'-gebeurtenis in deze elementen in deze volgorde activeren:

een
li
ul
lichaam
html
document root

Oplossing

Als we weten wat het borrelen van een evenement is, kunnen we een van de gewenste evenementen vangen die zich verspreiden via onze HTML.

Een goede plek om het in dit voorbeeld te vangen is het element <ul> , omdat dat element niet dynamisch is:

$('ul').on('click', 'a', function () {
  console.log(this.href); // jQuery binds the event function to the targeted DOM element
                          // this way `this` refers to the anchor and not to the list
  // Whatever you want to do when link is clicked
});

Hierboven:

We hebben 'ul' die de ontvanger is van deze gebeurtenisluisteraar
De eerste parameter ('klik') definieert welke gebeurtenissen we proberen te detecteren.
De tweede parameter ('a') wordt gebruikt om aan te geven waar de gebeurtenis vandaan moet komen (van alle onderliggende elementen onder de ontvanger van deze gebeurtenisluisteraar, ul).
Ten slotte is de derde parameter de code die wordt uitgevoerd als aan de vereisten van de eerste en tweede parameter is voldaan.

In detail hoe de oplossing werkt

Gebruiker klikt op <a> element
Dat veroorzaakt een klikgebeurtenis op het <a> -element.
Het evenement begint te borrelen richting document root.
De gebeurtenis borrelt eerst naar het element <li> en vervolgens naar het element <ul> .
De gebeurtenislistener wordt uitgevoerd terwijl aan het element <ul> de gebeurtenislistener is gekoppeld.
De gebeurtenislistener detecteert eerst de activerende gebeurtenis. Het borrelende evenement is 'klik' en de luisteraar heeft 'klik', het is een pass.
De luisteraarcontroles proberen de tweede parameter ('a') aan elk item in de bellenketen te koppelen. Aangezien het laatste item in de keten een 'a' is, komt dit overeen met het filter en dit is ook een pass.
De code in de derde parameter wordt uitgevoerd met behulp van het overeenkomende item omdat dit this . Als de functie geen aanroep van stopPropagation() , zal de gebeurtenis zich verder naar de root ( document ) voortplanten.

Opmerking: als een geschikte niet-veranderende voorouder niet beschikbaar / handig is, moet u het document . Gebruik als gewoonte 'body' om de volgende redenen:

body heeft een bug, die te maken heeft met styling, wat kan betekenen dat muisgebeurtenissen er niet aan bubbelen. Dit is afhankelijk van de browser en kan gebeuren wanneer de berekende lichaamslengte 0 is (bijvoorbeeld wanneer alle onderliggende elementen absolute posities hebben). Muisgebeurtenissen borrelen altijd naar document .
document bestaat altijd in uw script, dus u kunt gedelegeerde handlers aan een document buiten een DOM-ready handler en er zeker van zijn dat ze nog steeds werken.

Document laden Event .load ()

Als u wilt dat uw script wacht totdat een bepaalde bron is geladen, zoals een afbeelding of een PDF, kunt u .load() . Dit is een snelkoppeling voor de snelkoppeling voor .on( "load", handler) .

HTML

<img src="image.jpeg" alt="image" id="image">

jQuery

$( "#image" ).load(function() {
  // run script
});

Gebeurtenissen voor het herhalen van elementen zonder ID's te gebruiken

Probleem

Er is een reeks herhalende elementen op de pagina waarvan je moet weten op welke gebeurtenis een gebeurtenis plaatsvond om iets met die specifieke instantie te doen.

Oplossing

Geef alle gemeenschappelijke elementen een gemeenschappelijke klasse
Pas gebeurtenislistener toe op een klas. this binnengebeurtenishandler is het overeenkomende selectorelement waarop de gebeurtenis plaatsvond
Beweeg naar buitenste herhalen container die bijvoorbeeld door te beginnen bij this
Gebruik find() in die container om andere elementen te isoleren die specifiek zijn voor die instantie

HTML

<div class="item-wrapper" data-item_id="346">
   <div class="item"><span class="person">Fred</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>
<div class="item-wrapper" data-item_id="393">
   <div clss="item"><span class="person">Wilma</span></div>
   <div class="item-toolbar">
      <button class="delete">Delete</button>
   </div>   
</div>

jQuery

$(function() {
  $('.delete').on('click', function() {
    // "this" is element event occured on
    var $btn = $(this);
    // traverse to wrapper container
    var $itemWrap = $btn.closest('.item-wrapper');
    // look within wrapper to get person for this button instance
    var person = $itemWrap.find('.person').text();
    // send delete to server and remove from page on success of ajax
    $.post('url/string', { id: $itemWrap.data('item_id')}).done(function(response) {
      $itemWrap.remove()
    }).fail(function() {
      alert('Ooops, not deleted at server');
    });
  });
});

originalEvent

Soms zijn er eigenschappen die niet beschikbaar zijn in jQuery-evenement. Gebruik Event.originalEvent om toegang te krijgen tot de onderliggende eigenschappen

Krijg Scroll richting

$(document).on("wheel",function(e){
    console.log(e.originalEvent.deltaY)
    // Returns a value between -100 and 100 depending on the direction you are scrolling
})

Specifieke gebeurtenissen in- en uitschakelen via jQuery. (Genoemde luisteraars)

Soms wilt u alle eerder geregistreerde luisteraars uitschakelen.

//Adding a normal click handler
$(document).on("click",function(){
    console.log("Document Clicked 1")
});
//Adding another click handler
$(document).on("click",function(){
    console.log("Document Clicked 2")
});
//Removing all registered handlers.
$(document).off("click")

Een probleem met deze methode is dat ALLE luisteraars document door andere plug-ins enz. Aan het document gebonden, ook zouden worden verwijderd.

Vaker wel dan niet, willen we alle luisteraars losmaken die alleen door ons zijn verbonden.

Om dit te bereiken, kunnen we benoemde luisteraars binden als,

//Add named event listener.
$(document).on("click.mymodule",function(){
    console.log("Document Clicked 1")
});
$(document).on("click.mymodule",function(){
    console.log("Document Clicked 2")
});

//Remove named event listener.
$(document).off("click.mymodule");

Dit zorgt ervoor dat elke andere klik-luisteraar niet onbedoeld wordt gewijzigd.

Modified text is an extract of the original Stack Overflow Documentation

Licentie onder CC BY-SA 3.0

Niet aangesloten bij Stack Overflow

jQuery
Evenementen

Zoeken…

Opmerkingen

Eventhandlers koppelen en ontkoppelen

Bevestig een gebeurtenishandler

HTML

jQuery

Maak een gebeurtenishandler los

HTML

jQuery

jQuery

Gedelegeerde evenementen

Voorbeeld HTML

Het probleem

Achtergrondinformatie - Evenementpropagatie

Oplossing

In detail hoe de oplossing werkt

Document laden Event .load ()

Gebeurtenissen voor het herhalen van elementen zonder ID's te gebruiken

originalEvent

Krijg Scroll richting

Specifieke gebeurtenissen in- en uitschakelen via jQuery. (Genoemde luisteraars)