JavaScript event delegate

Event delegate

Event delegate        function F2 (d) {            Document.onclick = function (e) {                var e = e | | window.event;                var target = E.srcelement | | E.target;                if (Target.tagname = = "LI") {...}}}      

　　

Event Delegation: The event bubbling mechanism is used to add events to the parent to trigger the execution effect.

Benefits:

1. Improve performance

2. The newly added element will also have previous events

e.srcelement | | E.target: Gets the original DOM element when the event occurs.

Target.tagname: The first tag name of the DOM element, for example: LI;

Perform different processing functions by judging the attributes of the elements, such as tag name, ID, class, and so on.

This is much more efficient than binding an event to each element and then binding a function for each event.

In the example above: clicking on any of the LI will trigger the onclick event of document, (note that Li here does not bind any of the onclick events), so it can be understood as a "delegate".

Give the event to document. Let it handle the statements that Li should execute after the click.

JavaScript event delegate