react事件机制

Posted on In , ,

参考：React事件机制

React的事件机制

原生Js的事件机制

参看JS事件机制浅析：事件捕获、事件冒泡和事件委托

  1. 事件捕获
  2. 事件目标
  3. 事件冒泡
  4. 事件委托/事件代理
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <ul id="ul">
      <li>1</li>
      <li>2</li>
      <li>3</li>
      <li>4</li>
      <li>5</li>
    </ul>
  </body>
  <script>
    // let li = document.getElementsByTagName("li");
    // for (let i = 0; i < li.length; i++) {
    //   li[i].addEventListener("click", () => {
    //     console.log(li[i].innerHTML);
    //   });
    // }

    //事件代理  节约内存 提升性能(不需要注销子节点)
    let ul = document.getElementById("ul");
    ul.addEventListener("click", (event) => {
      console.log(event.target.innerHTML);
    });
  </script>
</html>

react事件机制