I read jsliang’s review guide for interview these days. I feel that my knowledge is very limited, which makes me feel a sense of crisis. I am afraid that I will lose my competitiveness if I leave my current company. On the job for half a year of small front cut to son, write a lot of bad place we forgive and teach.

Check out github’s examples before eating. “Learning Examples”

Event delegate, also called event agent. As the name suggests, it means asking people to do things. In JS, an event bound to a DOM is delegated to another DOM for execution. Before we learn about event delegate, let’s talk about event flow and event model.

Flow of events

The flow of events, as I understand it, is the passing of events. According to the direction of transfer is generally divided into the capture type and bubble type

Captured event flow

Passes from parent to child

Bubbling event flow

Passed from the child to the parent

When to execute the function is determined by the third argument of addEventListener(), which defaults to false for bubble execution, true for capture execution.

The event model

Describe the relationship between event model and event flow. The event model is actually a processing standard developed by different browsers, and the event flow corresponding to different event models also varies.

There are three main types of event models:

  • Original event model (no event flow)
  • DOM2 Event Model (W3C specification’s standard event model)
  • IE Event Model (IE only)

Here I’ll focus on the “DOM2 event model,” which is standard in modern browsers. For the other two event models, see the second link below.

The “DOM2 Event Model” event flow is divided into three phases:

  • Capture event phase
  • In the target stage
  • Bubble event phase

Again, as in the previous demo, when you click li, the event is passed. First there’s the capture phase (document–> HTML –>body–>div–>ul–>li), and then there’s the target phase, which is reaching the li you clicked on, and it’s in the middle of capture and bubble, Finally, the bubble stage (li–>ul–>div–>–body–> HTML –>document)

You can see here what trapping and bubbling is all about. Let’s take a look at their usage scenarios

The bubbling

In the process of development, we must have developed the “drop down to load the list” function, in general, our practice is to loop through the list of data, and add click events one by one.

Such as:

<div class="list-container"> <ul class="list"> </ul> </div> <button class=" BTN "> Add list items </button> <script> let listContainer = document.getElementsByClassName("list-container")[0] //div let list = document.getElementsByClassName("list")[0] //ul let listItem = document.querySelector(".list-item") let btn = document.querySelector(".btn") //button let doSome = (text) => { console.log(text) } let dataList = ["1", "2", "3", "4", "5"] let addDOM = (text) => { let newDOM = document.createElement("li") newDOM.classList.add("list-item") newDOM.addEventListener("click", () => { doSome(text) }) newDOM.innerHTML = text list.appendChild(newDOM) } dataList.forEach((x, i) => { addDOM(x) }) btn.addEventListener("click", () => { dataList.push(dataList.length + 1) addDOM(dataList[dataList.length - 1]) })Copy the code

The problem is that it takes up a lot of memory, which affects the performance of the web page. It’s fine when you have a small amount of data, but in general, the drop down list is not too small and we can use the feature of bubbling event streams to solve this problem. Just add a click event to the “ul” or “div” to implement the function in the previous example. Consider the following example:

<div class="list-container"> <ul class="list"> </ul> </div> <button class=" BTN "> Add list items </button> <script> let list = document.getElementsByClassName("list")[0] //ul let listItem = document.querySelector(".list-item") let btn = document.querySelector(".btn") //button let dataList = ["1", "2", "3", "4", "5"] let addDOM = (text) => {let newDOM = document.createElement("li") newdom.classList.add ("list-item") You can store attribute values that the interface needs, For example: newdom.setattribute ("data-text", text) newDOM.innerHTML = text list.appendChild(newDOM) } dataList.forEach((x, i) => { addDOM(x) }) list.addEventListener("click", (e) => {console.log(e.target.dataset. Text)}) btn.addeventListener ("click", "update "," update ", "update "," update ") () => { dataList.push(dataList.length + 1) addDOM(dataList[dataList.length - 1]) }) </script>Copy the code

This is the event delegate. The important thing to note here is that when you need to determine which element you clicked on or change the style of the target element, you can use the “event.target” attribute to do so. The example above shows how to get the value of the custom attribute data-text using “e.t. dataset”.

To prevent a bubble

Bubble does very well in the above questions, but don’t be fooled. He may be a Zhu Chaoyang. He’s a bad kid.

Let’s say the parent element and the child element are now bound to click events. When we click on the child element, the parent element’s click event is triggered. Usually we just want the target element’s event to fire. This is where “Stop the bubble” comes in. We can stop event bubbling by using “event.stopPropagation()”.

<div class="list-container"> <ul class="list"> <li class="list-item">1</li> </ul> </div> <script> let listContainer = document.getElementsByClassName("list-container")[0] //div let list = document.getElementsByClassName("list")[0] //ul let listItem = document.querySelector(".list-item") //l let doSome = (text) => { console.log(text) } ListItem. AddEventListener (" click ", (e) = > {the console. The log (" the print information just shows the use of "e" and "event" are equivalent, Can be used mutually ", e === event) //true The custom arguments "e" and "event" object references are the same. DoSome ('li———— ')}) list.addeventListener ("click", (e) = > {the console. The log (" -- -- - ul not prevent bubbles - - - ") doSome (' ul -- then perform ')}) listContainer. AddEventListener (" click ", () => {doSome('div———— ')}) </script>Copy the code

capture

I am ashamed that I did not use “capture” to realize functions in the process of development. I did a search on the Internet, but I couldn’t find any articles that could explain why. If you know of any classic examples, please leave them in the comments section for others to learn from. Thank you in advance.

From Monster’s personal blog: kite1874.com/19/

supplement

The following events do not support bubbling

  • onblur
  • onfocus
  • onmouseenter
  • onmouseleave

Reference article:

  • JS event, event bubble and event capture, event delegate

  • JavaScript Events (1) Event stream

  • Flow of events