JS Event binding/monitoring

Method of event binding/listening 1. Direct binding

As the name implies, it is directly bound to the DOM element onclick, onmouseover, onmouseout, onmousedown, onmouseup, ondblclick, onkeydown, onkeypress, OnKeyUp and other events

var ul = document.getElementById (' ul 'function() {    console.log (' Click event Binding succeeded ')}

This method is the simplest and is one of the earliest supported methods of Dom Level0. But there is a big problem with this approach. That is, if an element binds an event, it is possible to overwrite the previously bound event! Especially when there are multiple JS files. To solve this problem, Level2 has added event monitoring

2. Event Monitoring

The function of event listener implementation is similar to that of direct binding, but a new feature is added. That is, no matter the listening time, it will not overwrite the previous listener events. The essential reason is that the listener event produces a completely new anonymous function every time, unlike the previous function, which is naturally not overwritten.

var ul = document.getElementById (' ul ')        ul.addeventlistener (function() {            Console.log (' event binding succeeded 1 ')        })        Ul.addeventlistener (function() {            Console.log (' event binding succeeded 2 ')        })

JS Event binding/monitoring