JavaScript - Event-Handler

Links

http://molily.de/js/event-handling-fortgeschritten.html#addEventListener (2013-02) Gute Erklärungen ohne jQuery

http://de.selfhtml.org/javascript/sprache/eventhandler.htm

Gute Einführung und best practice: http://www.mediaevent.de/javascript/event-handler.html

Event Handling 2019

https://flaviocopes.com/how-to-add-event-listener-multiple-elements-javascript/

In JavaScript you add an event listener to a single element using this syntax:

document.querySelector('.my-element').addEventListener('click', event => {
  //handle click
})

But how can you attach the same event to multiple elements?

In other words, how to call addEventListener() on multiple elements at the same time?

You can do this in 2 ways. One is using a loop, the other is using event bubbling.

Using a loop

The loop is the simplest one conceptually.

You can call querySelectorAll() on all elements with a specific class, then use forEach() to iterate on them:

document.querySelectorAll('.some-class').forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  })
})
<syntaxhighlight>
If you don’t have a common class for your elements you can build an array on the fly:
<syntaxhighlight lang="javascript">
[document.querySelector('.a-class'), document.querySelector('.another-class')].forEach(item => {
  item.addEventListener('click', event => {
    //handle click
  })
})

Using event bubbling

Another option is to rely on event bubbling and attach the event listener on the body element.

The event is always managed by the most specific element, so you can immediately check if that’s one of the elements that should handle the event:

const element1 = document.querySelector('.a-class')
const element2 = document.querySelector('.another-class')

body.addEventListener('click', event => {
  if (event.target !== element1 && event.target !== element2) {
    return
  }
  //handle click
}

Im HTML definieren (Old School)

<input type="text" size="30" name="Ausgabe" readonly="readonly">

<input type="button" value="Letzter Update" onclick="this.form.Ausgabe.value = document.lastModified">

Eventhandler registrieren

Der Eventhandler muß nicht im HTML Tag registriert werden. Im Script Teil ist es übersichtlicher, weil die Handler nicht überall im Skript verteilt sind.

function sagGutenTag() {
   alert("Guten Tag!");
}
window.onload = sagGutenTag;

function meineFunktion(){

 alert("hallo welt");

} document.getElementById("meinElement").onclick = meineFunktion;

Hierbei muß man darauf achten, daß die Elemente für die Handler auch schon vom Browser geladen sind. Meistens schiebt man deshalb ein onload Event voraus. Wenn dieses Eintritt kann man den Rest registrieren (z.B. eine init() ) Funktion anlegen.

Best Practice um Eventhandler zu registrieren (auch alte IE)

Erst der IE9 macht das W3C konform. Aber mit jQuery funktionierts trotzdem einfach. Oder aber mit unten stehendem Skript.

Ohne jQuery gibt es den A Good Enough addEvent Ansatz von Austin Matzko, um mehrere Event-Handler für einen Typ bei einem Element registrieren zu können. Die Funktion verwendet addEventListener (DOM-Standard) oder attachEvent (Microsoft-Modell) je nach Verfügbarkeit.

function addEvent (obj, type, fn) {
   if (obj.addEventListener) {
      obj.addEventListener(type, fn, false);
   } else if (obj.attachEvent) {
      obj.attachEvent('on' + type, function () {
         return fn.call(obj, window.event);
      });
   }
}

Beispiel:

<p id="beispielabsatz">Klick mich!</p>
<script type="text/javascript">
function absatzKlick () {
	alert("Der Absatz wurde geklickt!");
}
addEvent(document.getElementById("beispielabsatz"), "click", absatzKlick);
</script>

Event Handler mit jQuery

Fängt Probleme bie unterschiedlichen Browsern ab.