DOM事件模型二（事件委托）

最新推荐文章于 2024-07-14 14:46:25 发布

yanAHeng

最新推荐文章于 2024-07-14 14:46:25 发布

阅读量139

点赞数

分类专栏：学习不止文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40005545/article/details/111643405

版权

学习不止专栏收录该内容

18 篇文章 0 订阅

订阅专栏

传统的事件处理中，需要为每个元素添加事件处理器。
事件委托则是一种简单有效的技巧，通过它可以把事件处理器添加到一个父级元素上，从而避免把事件处理器添加到多个子级元素上。
事件委托的原理用到的就是事件冒泡和目标元素，把事件处理器添加到父元素，等待子元素事件冒泡，并且父元素能够通过target（IE为srcElement）判断是哪个子元素，从而做相应处理。

传统事件处理，为每个元素添加事件处理器，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
<script>
  (function(){
    var list = document.querySelectorAll('li');
    for(let i = 0; i < list.length; i++){
      list[i].addEventListener('click', function(){
        this.style = 'background: red;color: white;'
      })
    }
  })()
</script>
</html>

事件代理的处理方式，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
</body>
<script>
  document.querySelector('ul').addEventListener('click', function(e){
    if(e.target.nodeName == "LI"){
      e.target.style = 'background: red;color: white;'
    }
  });
</script>
</html>