成为前端牛马第十五天 —— DOM操作二

咸鱼茄子煲OvO

已于 2024-08-06 20:40:04 修改

阅读量244

点赞数 5

文章标签：前端 javascript 开发语言

于 2024-08-06 20:16:39 首次发布

本文链接：https://blog.csdn.net/m0_67963390/article/details/140945501

版权

一. 事件对象

1. 基本使用

事件对象是事件触发时所产生的数据集合。也就是 event 对象。可以使用e简写。

这个对象可以提供事件相关的信息，例如：鼠标的位置、键盘按键信息、事件源等等，常用e.target获取事件触发源信息。

<body>
    <div class="box"></div>
    <script>
      document.querySelector(".box").addEventListener("click", (e) => {
        console.log(e);
        console.log(e.target)
      });
    </script>
  </body>

可以发现event对象包含许多相关信息，通过target属性可以获取到触发元素，如下，触发事件为span元素。

2. 相关属性

除了常用的target，还有鼠标位置相关的属性、

e.clientX 事件对象距离页面左上角的横轴距离

e.clientY 事件对象距离页面左上角的侧轴距离

e.pageX 事件对象在可视区域的横轴位置

e.pageY 事件对象在可视区域的纵轴位置

3.简单练习

实现元素跟随鼠标移动

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .box {
        width: 100px;
        height: 100px;
        background-color: rgb(249, 193, 202);
        /* margin: 100px 0 0 100px; */
        position: absolute;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
    <script>
      let box = document.querySelector(".box");
      document.addEventListener("mousemove", (e) => {
        console.log(e.pageX); //事件对象在可视区域的位置
        console.log(e.pageY);

        box.style.left = e.pageX - box.offsetWidth / 2 + "px";
        box.style.top = e.pageY - box.offsetHeight / 2 + "px";
      });
  </body>

二. 事件监听

1. 基本使用

dom对象.addEventListener(参数1，参数2，参数3)

参数1:事件类型

参数2:回调函数

参数3:布尔值

true捕获(从外到内) false冒泡 (从内到外)

事件监听采用的是函数形式，所以不会出现像onclick属性赋值方式那样被覆盖的情况，有多个监听事件，就触发多少次。

2. 捕获与冒泡

事件捕获：可以简单概括为，触发子元素的点击事件的同时，其父元素也会同时触发点击事件，从window对象开始，由外到内依次触发。

事件冒泡：与事件捕获顺序相反，先触发子元素，而后触发父元素，最后触发window对象。

如同所示，点击最小的孙标签，click事件会依次触发，sun => child => father，事件冒泡有利有弊，不需要冒泡时可以使用 e.stopPropagation() 方法

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .father {
        width: 300px;
        height: 300px;
        background-color: rgba(200, 141, 159, 0.6);
      }
      .child {
        width: 200px;
        height: 200px;
        background-color: skyblue;
      }
      .sun {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="father">
      <div class="child">
        <div class="sun"></div>
      </div>
    </div>
    <script>
      //dom对象.addEventListener(参数1，参数2，参数3)
      //参数1:事件类型
      //参数2:回调函数
      //参数3:布尔值
      // true捕获(从外到内) false冒泡 (从内到外)
      document.querySelector(".father").addEventListener("click", () => {
        console.log("father");
      });
      document.querySelector(".child").addEventListener("click", (e) => {
        e.stopPropagation(); //阻止冒泡

        console.log("child");
      });
      document.querySelector(".sun").addEventListener("click", (e) => {
        e.stopPropagation();
        console.log("sun");
      });
    </script>
  </body>

三. 事件委托

给父元素或祖先元素监听事件，通过冒泡机制，会自动为子元素监听同样的事件，实现子元素触发父元素的事件。

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <ul>
        <li>12347890</li>
      </ul>
    </div>
    <script>
      //事件委托
      //就是给父元素进行事件绑定，利用冒泡原理，同时也能够给子元素绑定同样的事件

      let box = document.querySelector(".box");
      box.addEventListener("click", (e) => {
        console.log(e.target);
      });
    </script>
  </body>

如图所示，点击事件由父元素监听，但由li标签触发。

四. 懒加载练习

当页面滑动到一定距离后，会动态追加元素，实现懒加载效果。

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }

      ul {
        list-style: none;
      }

      .wrapper {
        width: 90%;
        margin: 0 auto;
      }

      .wrapper ul li {
        height: 100px;
        background-color: #ccc;
        border-radius: 10px;
        margin-top: 10px;
        padding: 10px 15px;
        font-size: 24px;
        color: #fff;
      }
    </style>
  </head>
  <body>
    <div class="wrapper">
      <ul>
        <li style="background-color: #b791a3">演示页</li>
      </ul>
    </div>
    <script src="./utils.js"></script>
    <script>
      //1.浏览器视口高度
      //  document.documentElement.clientHeight
      //  window.innerHeight

      //2.页面滚动距离 document.documentElement.scrollTop
      //3.页面高度 document.documentElement.scrollHeight
      //算法：浏览器视口 + 页面滚动距离 = 页面高度
      //   console.log(window.innerHeight);
      let ul = document.querySelector(".wrapper ul");
      let num = 0;

      function fn() {
        for (let i = 0; i < 20; i++) {
          num++;
          let li = document.createElement("li");
          let bgc = getRandomColor();
          li.innerHTML = "文本" + num + bgc;
          li.style.backgroundColor = bgc;
          ul.appendChild(li);
        }
      }
      fn();
      window.onscroll = function () {
        //浏览器视口高度
        let ch = document.documentElement.clientHeight;
        //页面滚动距离
        let st = document.documentElement.scrollTop;
        //页面总高
        let sh = document.documentElement.scrollHeight;
        if (parseInt(sh - ch - st) <= 100) {
          fn();
        }
      };
    </script>
  </body>

咸鱼茄子煲OvO

关注

5
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
成为前端牛马第十五天 —— DOM操作二

事件对象是事件触发时所产生的数据集合。也就是 event 对象。可以使用e简写。这个对象可以提供事件相关的信息，例如：鼠标的位置、键盘按键信息、事件源等等，常用e.target获取事件触发源信息。可以发现event对象包含许多相关信息，通过target属性可以获取到触发元素，如下，触发事件为span元素。
复制链接

扫一扫