JavaScript HTML DOM EventListener

De EventTarget.addEventListener methode koppelt een event afhandelaar aan het document.

Beschrijving

De methode addEventListener is beschikbaar op alle elementknooppunten, het window-object en het documentobject. Dat wil zeggen dat je de mogelijkheid hebt om eventlisteners toe te voegen aan delen van een HTML-document, alsmede aan JavaScript-objecten met betrekking tot de DOM en het Browser-objectmodel of BOM.

Je moet zelf bepalen als een event tot de capture- of bubbelfase behoort door de laatste parameter van de addEventListener functie op true of false te zetten. In moderne browsers staat die standaard ingesteld op false.

Naam	Beschrijving	Argument type	Argument naam
`addEventListener`	daarmee kan je event listeners registreren op de event target.	DOMString	type
		EventListener	listener
		boolean	useCapture
`removeEventListener`	daarmee kan je event listeners verwijderen van de event target.	DOMString	type
		EventListener	listener
		boolean	useCapture
`dispatchEvent`	Allows sending the event to the subscribed event listeners.	Event	evt

Onthoud dat:

Om te voorkomen dat het event opborrelt, moet je de stopPropagation methode van het event objec oproepent.
Om te voorkomen de standaard event handler van het event wordt uitgevoerd, moet je de preventDefault methode van het event object oproepen.

Het verschil met het traditionele model ligt in het feit dat:

meerdere event handlers kunnen worden geregistreerd voor het evenement het zelfde event;
de useCapture optie kan worden gebruikt om aan te geven dat de event handler uitgevoerd moet worden in de capture fase en niet in de bubbling fase.

Voorbeeld 1

In de eventafhandelaar colorChange maken we geen gebruik van de event parameter die addEventListener doorgeeft aan de eventafhandelaar en halen we de referenctie naar het HTML element, dat het event afvuurde, manueel op.

In de colorChangeRefactored methode voegen we een parameter toe aan de eventafhandelaar die het event argument van addEventListener aanneemt. Dat event object bevat een property target die een verwijzing bevat naar het HTML element dat het event afvuurde.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Eventlistener</title>
    <script>
        // als je over article zweeft, kleur van tekst veranderen
        var changeColor = function() {
            let articleElem = document.querySelector('article');
            articleElem.style.color = 'green';
        }
        
        window.onload = function () {
            let articleElem = document.querySelector('article');
            articleElem.addEventListener('click', changeColorRefactored, false);
        }
        
        // refactoring bovenstaande code door gebruik
        // te maken van de event parameter
        var changeColorRefactored = function(e) {
            alert(e.target.tagName);
            // e.target is een refenrentie naar het dom
            // html element dat het event heeft afgevuurd
            e.target.style.color = "red";
        }
        
        
    </script>
</head>
<body>
    <article>
        In totaal zijn vanmorgen in Nederland, Duitsland, België en Italië 90
        mensen gearresteerd, onder wie een aantal kopstukken van de maffiaclan.
        Ze worden onder meer verdacht van drugshandel, het witwassen van geld en
        lidmaatschap van een maffia-organisatie. Er is ook 2 miljoen euro, 140
        kilo xtc-pillen en 3.000 tot 4.000 kilo cocaïne in beslag genomen.
    </article>
</body>
</html>

Voorbeeld 2

Als je op een p element klikt wordt de kleur van de tekst pink. Als je op een andere paragraaf klikt wordt de daarnet geselecteerde paragraaf zwart en de nieuw geselecteerde pink. We gebruiken een closure om de referentie naar de reeds geselecteerde paragraaf te onthouden:

let article = document.querySelector('article');
article.addEventListener('click', (function() {
    let selectedTarget = null;
    return function(e) {
        if (e.target.tagName === 'P') {
            e.target.style.color = "blue";
            if (selectedTarget !== null) {
                selectedTarget.style.color = 'black';
            }
            selectedTarget = e.target;
        }
    };
})());

Voorbeeld 3

<!DOCTYPE html>
<html lang="nl">

<head>
    <meta charset="utf-8" />
    <meta name="application-name" content="Modern Ways">
    <meta name="description" content="We leren werken met tabellen">
    <meta name="keywords" content="event, js, tradionel model">
    <meta name="author" content="Jef Inghelbrecht">
    <title>Event listener model voorbeeld</title>
    <script type="text/javascript" src="js/addeventlistener-voorbeeld.js"></script>
    <script>
        document.addEventListener("click", handleClickEvent, false);
        document.addEventListener("mouseout", handleMouseOutEvent, false);

        /* 
         * Maak de achtergrond terug wit als de gebruiker
         * de muis van de th verwijderd
        */ 
        function handleMouseOutEvent(event) {
            if (event.target.tagName == 'TH') {
                changeBackgroundColor(event.target, 'white');
            }

        }

        /*
         * Mini controller om de click events af te handelen
         */
        function handleClickEvent(event) {
            var th;
            var target = event.target;
            if (target.tagName == 'TH') {
                // achtergrondkleur rood, verboden te wijzigen!
                changeBackgroundColor(target, 'red');
            }
            else if (target.tagName == 'TD') {
                makeElemEditable(target);
            }
        }

        /*
         * verander de achtergrondkleur
         */
        function changeBackgroundColor(target, color) {
            target.style.background = color;
        }

        /*
         * maak het opgegeven element editable en
         * voeg evenhandler toe om het element weer normaal
         * te maken als de gebruiker het element verlaat
         */
        function makeElemEditable(target) {
            target.contentEditable = true;
            // Een voorbeeld van een anonieme functie
            target.addEventListener('blur', function(evt) {
                target.contentEditable = false;
                target.removeEventListener('blur', evt.target);
                // hier kan je code toevoegen om de wijzigingen
                // eventueel op te slaan
            });

            var char = 1; // character at which to place caret
            var sel;
            target.focus();
            if (document.selection) {
                sel = document.selection.createRange();
                sel.moveStart('character', char);
                sel.select();
            }
            else {
                sel = window.getSelection();
                sel.collapse(target.firstChild, char);
            }
        }
    </script>
</head>
<body>
    <table id="jommeke-boeken" class="spreadsheet">
        <caption>Boeken van Jommeke</caption>
        <thead>
            <tr>
                <th scope="col">Nummer</th>
                <th scope="col">Titel</th>
                <th scope="col">Kaft</th>
                <th scope="col">&euro;</th>
                <th scope="col">&yen;</th>
                <th scope="col">&pound;</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">1</th>
                <td>Jacht op een voetbal</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">2</th>
                <td>De zingende aap</td>
                <td>Softcover</td>
                <td>5,22</td>
                <td>34</td>
                <td>3,76</td>
            </tr>
            <tr>
                <th scope="row">3</th>
                <td>De Koningin van Onderland</td>
                <td>Hardcover</td>
                <td>8,22</td>
                <td>54,1</td>
                <td>5,91</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

Bronnen

w3schools, JavaScript HTML DOM EventListener

MDN, EventTarget.addEventListener()

2018-12-05 18:08:12