使用事件委托制作一个选择更改背景图效果

在学完addEventListener之后，发现这个事件委托的功能特别强大，可以覆盖掉之前学过的好多知识，比如说之前清除陈旧样式需要使用for循环之后再判断，而现在只需要一个addEventListener(事件监听，也可称作事件委托)就完事了，首先这个事件委托的格式为 xxx.addEventListener('绑定事件','绑定函数','useCapture'),第三个参数的意思为，当它的值为false是，默认事件冒泡，为true时，默认事件捕获。
事件捕获就是例如一个简单的点击事件，是从Document 传入html,再到body再到父盒子，之后才是目标对象，是遵循这样的一个流程。
事件冒泡是一个响应的过程，从你的目标对象，再通过这个路径传出。

实现点击图片更换效果时，我需要对目标对象的 >= 一级以上的盒子，添加一个事件监听方法，将目标对象的事件委托给 被监听的对象，在更改背景图之前我还需要做一个判断，让除目标对象之外的盒子效果不会被选中，这里我是用了一个if判断，如果标签与我期望的标签属性名不相等，那就直接return不执行。这里需要注意绑定函数中的参数e(Event)的指向和使用问题，e.target是指向的目标，可以对其添加nodeName 目标对象的标签。

点击查看代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<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>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      body {
        background: url(images/1.jpg) no-repeat center top;
      }

      li {
        list-style: none;
      }

      .baidu {
        overflow: hidden;
        margin: 100px auto;
        background-color: #fff;
        /* width: 410px; */
        width: 430px;
        padding-top: 3px;
      }

      .baidu li {
        float: left;
        margin: 0 1px;
        cursor: pointer;
      }

      .baidu img {
        width: 100px;
      }
    </style>
  </head>

  <body>
    <ul class="baidu">
      <li><img src="images/1.jpg" /></li>
      <li><img src="images/2.jpg" /></li>
      <li><img src="images/3.jpg" /></li>
      <li><img src="images/4.jpg" /></li>
    </ul>
    <script>
        var ul = document.querySelector('ul')

        var imgs = document.querySelectorAll('img')

        var body = document.querySelector('body')
        
        ul.addEventListener('click',function(e){
            if(e.target.nodeName !== 'IMG') return
            // console.log(e.target.nodeName);
               body.style.backgroundImage = `url(${e.target.src})`
            })
      
    </script>
</body>
</html>
posted @ 2022-06-23 10:54  凳子01  阅读(29)  评论(0)    收藏  举报