This is the 14th day of my participation in the August More Text Challenge

DOM event model

There are two types of DOM event models: script model, inline model, and dynamic binding

<body> <! - the script model - > < button onclick = "javascrpt: alert (' one ')" > one < / button > <! Inline model -- -- - > < button onclick = "showPop ()" > two < / button > <! </button id="btn3">three</button> </body> <script> // DOM0: Function showPop() {alert("two"); function showPop() {alert("two"); } var btn3 = document.getElementById("btn3"); btn3.onclick = function () { alert("three"); Function () {alert("one");} /*DOM2: can add multiple events to the same element */ btn3.addEventListener("click",function () {alert("one"); }); btn3.addEventListener("click",function () { alert("two"); }) if (btn3.attachEvent){ /*IE*/ btn3.attachEvent("onclick",function () { alert("IE one"); }) }else { /*W3C*/ btn3.addEventListener("click",function () { alert("W3C one"); }) } </script>Copy the code

DOM event flow

First, events are specific moments of interaction that occur in a document or browser window, and event flow, in turn, event propagation describes the order in which events are received from the page.

The event bubbling

Event bubbling is an event that starts with a specific element (the node with the deepest nesting in the document) and then propagates up the hierarchy to less specific nodes.

The < body > < div > < ul > < li > click1 < / li > < / ul > < / div > < / body > $(" li "). Click (function () {/ / click the li elements})Copy the code

When the LI element is clicked, the click event propagates up the DOM tree, occurring on every node, but not bound and therefore not processed.

3. Event delegation

With event bubbling, you can manage all events of a type by specifying only one event handler, usually using event delegates if you want to bind a large number of events (good for Li above, event delegates if there are more than one). Is that some less specific node should receive the event earlier, and the specific node should receive the event last. Event capture involves catching an event before it reaches a condition.

For example, with the Li click event, the Document object receives the Click event and then searches down the DOM tree until the DOM element with the same event starts executing.

Flow of events

Event flow is also known as event propagation. The event flow defined by DOM2 events includes three stages: event capture stage, target stage and event bubbling stage

Advantages:

1, save memory occupation, reduce event registration

2. New child objects do not need to bind events to them again, and dynamically added elements can also be used

Disadvantages:

1. There are limitations, such as focus,blur and other events that get the focus, which have no event bubbling mechanism, so they cannot be delegated.

2. Mousemove, Mouseout, etc., have bubbling events, but can only be continuously evaluated by location, and are too costly for event delegation.

Tanabata happy, please drink milk tea for a lifetime! @ flower cat