事件委托 - 拘小礼而行大义

概念

事件委托又名事件代理，通过JS事件的冒泡机制实现。

#box1{
      width: 500px;
      height: 500px;
      margin: auto;
      background-color: blue;
    }
#box2{
      width: 300px;
      height: 300px;
      margin: auto;
      background-color: green;
  　}

#box3{
      width: 100px;
      height: 100px;
      margin: auto;
      background-color: red;
    }

<body>
  <div id="box1" onclick="fn1()">
    <div id="box2">
      <div id="box3"></div>
    </div>
  </div>

  <script>
    function fn1(){
      console.log(event.target)
    }</script>
</body>

整个HTML结构是三层嵌套的div，将事件回调绑定在最外层的蓝色div上后，点击红色div和绿色div都能够触发事件。这样就避免了对DOM的多次访问。

事件回调的绑定方式

1.事件监听器

let box1 = document.getElementById("box1")
box1.addEventListener("click",fn1)
(这里的执行原理与2相同，因此也不需要在函数后加小括号，但是需要注意，这里第一个参数是事件名字符串，不需要加on)
(还有第三个参数可选。布尔值，指定事件是否在捕获或冒泡阶段执行。)
(on代表触发某个事件时，这里第一个函数是事件名，比如点击-->click）

2.DOM获取元素后绑定

let box1 = document.getElementById("box1")
box1.onclick = fn1
(这里的执行机制是，触发事件找到回调函数并执行，因此赋值语句中函数后不要加小括号，否则事件还没触发，回调就立即执行了)

3.直接在标签中绑定

<div id="box1" onclick="fn1()"></div>
(标签中的""中实际是JS执行环境，也就是触发了事件后，就会执行""中的代码，所以要用函数调用语句)
(当触发事件执行的操作比较简单时，可以直接在""写操作代码)

<div id="box1" onclick="console.log(1)"></div>

posted on 2023-04-19 14:24 拘小礼而行大义阅读(19) 评论(0) 收藏举报