WebAPI(二)、DOM事件监听、事件对象event、事件流、事件委托、页面加载与滚动事件、client,offset

news2024/11/13 9:25:36

文章目录

  • 一、 DOM事件
    • 1. 事件监听
    • 2. 事件类型
      • (1)、鼠标事件
      • (2)、焦点事件
      • (3)、键盘事件
      • (4)、文本事件
    • 3. 事件对象
      • (1)、获取事件对象
      • (2)、事件对象常用属性
    • 4. 环境对象 this
    • 5. 回调函数
  • 二、 DOM事件进阶
    • 1. 事件流
      • (1)、 捕获阶段
      • (2)、 冒泡阶段
      • (3)、 阻止冒泡
      • (4) 、阻止元素默认行为
      • (5) 、解绑事件
    • 2. 事件委托
    • 3. 其他事件
      • (1)、页面加载事件load
      • (2)、页面滚动事件scroll
      • (3)、页面滚动事件获取位置(scrollTop)
      • (4)、页面滚动到指定坐标scrollTo
    • 4. 页面尺寸事件
      • (1)、获取元素宽高(client)
      • (2)、窗口尺寸发生变化时触发的事件resize
    • 5. 页面尺寸与位置offset

一、 DOM事件

事件就是系统内发生的事件,比如单击一个按钮;
事件监听就是让程序检测是否有事件发生,并作出响应。

1. 事件监听

语法:元素对象.addEventListener(‘事件类型’,要执行的函数)

事件监听三要素

  • 事件源:哪个dom元素的事件被触发了
  • 事件类型:事件触发方式 click mouseover
  • 事件调用的函数:作出什么响应

事件监听版本

(1)、DOM L0: 事件源.on事件 = function(){} (比如btn.onclick = …)
(2)、 DOM L2: 事件源.addEventListener(‘事件类型’,要执行的函数)
区别: on方式会被覆盖,addEventListener可以绑定多次,拥有更多特性

案例:随机点名

在这里插入图片描述

需求:点击开始,随机抽取数组中的数并显示出来。点击结束,停止滚动,删除当前抽取的数据。抽到最后一个数据时,两个按钮禁用。

<body>
  <div class="box">
    <h1>随机点名</h1>
    <p>
      名字是:<span class="name">这里显示姓名</span>
    </p>
    <div class="operator">
      <button class="start">开始</button>
      <button class="end">结束</button>
    </div>
  </div>
  <script>
    // 1. 数组,为了方便观察,用数字代替姓名
    const nameList = [1,2,3,4]
    // 获取元素
    const name = document.querySelector('.box .name')
    const start = document.querySelector('.start')
    const end = document.querySelector('.end')
    let timeId = 0
    let num = 0
    // 3. 事件监听
    start.addEventListener('click', function () {
    // 如果数组中只有一个值,两个按钮禁用
       if (nameList.length === 1) {
        start.disabled = true
        end.disabled = true
      }
      timeId = setInterval(function () {
        // 滚动姓名
        num = Math.floor(Math.random() * nameList.length)
        name.innerHTML = nameList[num]
      }, 100)
    })
    // 4. 关闭事件
    end.addEventListener('click', function () {
      clearInterval(timeId)
      // 删除当前抽取的数组
      nameList.splice(num, 1)
    })
  </script>
</body>

2. 事件类型

(1)、鼠标事件

  • 鼠标点击 click
  • 鼠标经过 mouseenter
  • 鼠标离开 mouseleave

(2)、焦点事件

  • 获得焦点 focus
  • 失去焦点 blur

(3)、键盘事件

  • 键盘按下 keydown
  • 键盘抬起触发 keyup

(4)、文本事件

  • 用户输入事件 input

案例:评论字数统计
思路:①监听用户输入 ②不断获取文本框内的字符长度,文本域.value.length ③ 把获得的数字给下面文本框
在这里插入图片描述

<body>
  <div class="comment">
    <div class="box">
      <textarea class="ipt"></textarea>
      <p><span class="left-num">200</span>/200字</p>
    </div>
    <button>发布</button>
  </div>
  <script>
    // 评论字数统计--- value.length
    const comment = document.querySelector('.comment textarea')
    comment.addEventListener('input', function () {
      const left = 200 - comment.value.length
      document.querySelector('.box .left-num').innerHTML = left
    })
  </script>
</body>

3. 事件对象

事件对象也是个对象,包含事件触发的相关信息

(1)、获取事件对象

在事件监听的回调函数中第一个参数就是事件对象,一般命名为event或e

元素.addEventListner('click',function(e){
    // e就是事件对象
})

(2)、事件对象常用属性

type:获取当前的事件类型
clientX/clientY:获取光标相对于浏览器可视窗口左上角的位置(可应用于商品的放大镜场景中,通过获取鼠标的位置来确定要放大的位置)
offsetX/offsetY:获取光标相对于当前DOM元素左上角的位置
key:用户按下的键盘键的值。现在不提倡使用keyCode

    const input = document.querySelector('input')
    input.addEventListener('keyup', function (e) {
      if (e.key === 'Enter') {
        console.log('我按下了回车键');
      }
    })

4. 环境对象 this

环境对象就是函数内部的this,代表当前函数运行时所处的环境
this指向函数的调用者。谁调用函数,this就是谁

  function fn () {
    console.log(this); // window
  }
  // 本质上是window调用的fn
  fn()  // 等价于 window.fn()

  // button
  const btn = document.querySelector('button');
  btn.addEventListener('click', function () {
    console.log(this); //this指的是btn对象
    this.style.color = 'red'
  })

5. 回调函数

就是把函数A当作参数传递给另一个函数B时,函数A叫做回调函数。
使用匿名函数作为回调函数比较常见.

  // 函数A作为参数传递给函数B时,函数A为回调函数
  // 使用场景1
  function fn () {
    console.log('我是回调函数');
  }
  setInterval(fn, 1000)

  // 使用场景2
  btn.addEventListener('click', function () {
    console.log('我也是回调函数');
  })

二、 DOM事件进阶

1. 事件流

事件流就是事件执行的整个流动路径;假设页面中有个button,当触发事件时,会经历两个阶段:
(1) 捕获阶段:从父到子(button)
(2) 冒泡阶段:从子(button)到父
在这里插入图片描述

(1)、 捕获阶段

从DOM根元素开始执行对应的事件
语法:DOM元素.addEventListener(事件类型,事件处理函数,是否使用捕获机制)

  • 第三个参数传入true代表是捕获阶段触发事件,传入false代表冒泡阶段触发事件
  • 若是L0监听事件(onclick),则只有冒泡阶段,没有捕获
<body>
  <div class="father">
    <div class="son"></div>
  </div>
  <script>
    //点击son标签,依次弹出:grandpa,father,son
    
    // document.addEventListener 给最大的对象document添加监听事件
    document.addEventListener('click', function () {
      alert('grandpa')
    }, true)
    
    // father标签监听事件
    document.querySelector('.father').addEventListener('click', function () {
      alert('father')
    }, true)
    
    // son标签监听事件
    document.querySelector('.son').addEventListener('click', function () {
      alert('son')
    }, true)
</script>

页面中的body也有经历了捕获,但是没写对应代码所以没看到效果。事件捕获需要写对应代码才能看到效果

(2)、 冒泡阶段

冒泡:当一个元素触发事件后,会依次向上调用所有父级元素的同名事件;

同名事件:做一次点击,则冒泡会执行每个父级的点击事件(而不是鼠标经过等其他事件),只不过就看该父级有没有添加事件监听。若未添加则看不到任何效果。

事件的触发默认是在冒泡阶段。

// 点击son,依次弹出son,father,grandpa
document.addEventListener('click', function () {
    alert('grandpa')
})
document.querySelector('.father').addEventListener('click', function () {
    alert('father')
})
document.querySelector('.son').addEventListener('click', function () {
    alert('son')
})

(3)、 阻止冒泡

因为默认就有冒泡模式的存在,所以容易导致事件影响到父级元素。若想把事件就限制在当前元素内,就需要阻止事件冒泡。
语法事件对象e.stopPropagation()

//阻止冒泡,需要用到事件对象--
document.addEventListener('click', function () {
    alert('biggest')
})
document.querySelector('.big').addEventListener('click', function () {
    alert('big')
})
document.querySelector('.small').addEventListener('click', function (e) {
    alert('small')
    e.stopPropagation()
})

注意:此方法可以阻断事件流动传播,不光在冒泡阶段有效,捕获阶段也有效

(4) 、阻止元素默认行为

阻止默认行为的发生,比如阻止链接跳转,表单域跳转;
语法:事件对象e.preventDefault()

 <!-- 点击链接不跳转 -->
<a href="https://www.baidu.com">百度</a>
<script>  
    const a = document.querySelector('a')
    a.addEventListener('click', function (e) {
      e.preventDefault()
    })
</script>

(5) 、解绑事件

const box = document.querySelector('.box')
// 传统L0注册
btn.onclick = function () {
    alert('点击')
}
// 解绑事件
btn.onclick = null

// 事件监听注册 L2
function fn () {
    console.log('点击事件');
}
box.addEventListener('click', fn)
// 解绑
box.removeEventListener('click', fn)

如果回调函数是匿名函数,则无法解绑

2. 事件委托

比如,快递小哥把一个班的快递委托给班主任,然后学生都找班主任领快递。这样就不用一个一个的找同学去送快递

事件委托是利用事件流的特征解决一些开发需求(只是一种技巧)

  • 优点:减少注册次数,可以提高程序性能
  • 原理:事件委托其实是利用事件冒泡的特点。给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件。

通过事件对象.target.tagName 可以获得真正触发事件的元素

  <!-- 需求:点击哪个li标签,哪个li变色 --> 
<ul>
    <li>one</li>
    <li>two</li>
    <li>three</li>
    <li>four</li>
    <li>five</li>
    <p>p标签</p>
  </ul>
  <script>
    // 点击哪个小li,哪个就变色
    const ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      console.dir(e.target);
       // 目标元素是li标签,如果是p标签,则颜色不变
      if (e.target.tagName === 'LI') {
        // 设置颜色!!!!!!
        e.target.style.color = 'red'
      }
    })
  </script>

3. 其他事件

之前写的JavaScript都放在HTML文件的底部,因为浏览器会按照代码在文件中的顺序加载HTML。若先加载的JavaScript想要修改下方的HTML,则会因为HTML尚未被加载而失效。

(1)、页面加载事件load

页面加载事件是加载外部资源(如图片、外联CSS和JavaScript等)加载完毕时触发的事件。

load:监听页面所有资源加载完毕

// 1.页面加载事件    
window.addEventListener('load', function () {
    // 执行的操作
    })
// 2.也可针对某个资源绑定load事件
img.addEventListener('load',function(){
    // 等图片加载完,再执行的操作
})

DOMContentLoaded事件:DOM元素加载完,无需等待样式表、图像等完全加载

document.addEventListener('DOMContentLoaded', function () {
 // 比load触发的快
})

应用场景:图片还没加载完,但是不影响页面进行交互

(2)、页面滚动事件scroll

滚动条在滚动的时候持续触发的事件;
应用场景:固定导航栏,返回顶部…

  • 监听整个页面滚动:给windowdocument添加scroll事件
// 页面滚动事件
window.addEventListener('scroll',function(){
    // 执行的操作
})
  • 监听某个元素的内部滚动,直接给某个元素加scroll即可

(3)、页面滚动事件获取位置(scrollTop)

scrollLeftscrollTop:获取元素内容往左、往上滚出去看不到的距离;
这两个值是可读写的,即可读值也可赋值。一般在scroll事件里获取被卷去的距离
在这里插入图片描述
案例一:获取div内容滚动的距离

<style>
    .box {
        overflow: scroll;
        width: 400px;
        height: 150px;
        border: 1px solid black;
        margin: 200px;
        display: block;
    }
</style>
<body>
    <div class="box">
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
        <p>滚动条在滚动的时候持续触发的事件</p>
    </div>

    <script>
        //div滚动获取
        const div = document.querySelector('div')
        div.addEventListener('scroll', function () {
            console.log(this.scrollTop);
        })
    </script>

在这里插入图片描述

案例二:获取页面滚动的距离

页面滚动的距离主要是看HTML滚动的距离;
获取HTML元素对象:document.documentElement

<style>
    body {
        height: 3000px;
    }
</style>
<body>
 <script>
        // 获取html:document.documentElement
        window.addEventListener('scroll', function () {
            // 这句话必须写在里面,因为要时刻获取最新的值
            const n = document.documentElement.scrollTop;
            console.log(n);
        })
 </script>

在这里插入图片描述

(4)、页面滚动到指定坐标scrollTo

语法:元素.scrollTo(x,y)
作用:把内容滚动到指定的坐标

4. 页面尺寸事件

(1)、获取元素宽高(client)

获取元素的可见部分宽高:clientWidthclientHeight (不包含边框、margin、滚动条等)。如果元素是个块级元素,clientWidth = width +padding;如果元素是个行内元素,clientWidth = 行内元素被内容撑开的宽度+padding

  <style>
    .box {
      width: 300px;
      height: 300px;
      padding: 10px;
      border: 10px solid black;
      background-color: skyblue;
    }
  </style>
<body>
  <div class="box">1212121222</div>
  <script>
    const box = document.querySelector('.box');
    console.log(box.clientWidth); // 320 width+padding,不包含border的宽度
  </script>
</body>

(2)、窗口尺寸发生变化时触发的事件resize

window.addEventListener('resize', function () {
    // 页面尺寸发生变化时,触发的事件
    // 检测html可视区宽度变化
    const n = document.documentElement.clientWidth
    console.log(n);
})

5. 页面尺寸与位置offset

通过JS的方式,得到元素在页面中的位置;这样当页面滚动到这个位置时,可进行一些操作,就不用自己计算了

  • 获取元素自身宽高:offsetWidth与offsetHeight
    • 获取出来的是数值,方便计算
    • offsetWidth与offsetHeight是自身的宽高+padding+border
    • 获取的是可视宽高,如果盒子是隐藏的,获取的结果是0
  • 获取位置:offsetLeftoffsetTop
    • 获取元素距离自己有定位父级元素的左、上距离;
    • offsetLeft与offsetTop是只读属性
<style>
        .box {
            width: 100px;
            height: 100px;
            background: skyblue;
            margin-left: 100px;
        }
        p {
            width: 50px;
            height: 50px;
            margin-left: 10px;
            background: pink;
        }
  </style>
</head>

<body>
    <div class="box">
        <p></p>
    </div>
    <script>
        const box = document.querySelector('.box')
        console.log(box.offsetLeft); // 108 = 100 + 8(body的8px外边距)
        const p = document.querySelector('p') 
        console.log(p.offsetLeft);
    </script>
</body>

若父级无定位,则向上找有定位的父级,值为距自己有定位的父级的距离
在这里插入图片描述
若给div加一个相对定位,position:relative,则p.offsetLeft = 10

页面滚动时,offset的值也不变

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2123275.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

python绘制3D瀑布图

成品&#xff1a; 代码&#xff1a; def line_3d(x, y, z, x_label_indexs):"""在y轴的每个点&#xff0c;向x轴的方向延伸出一个折线面&#xff1a;展示每个变量的时序变化。x: x轴&#xff0c;时间维&#xff0c;右边。y: y轴&#xff0c;变量维&#xff0c;…

前端:JavaScript 实现类

文章目录 1. Es6-类-class2. Es6-class 实现继承3. Es6-class 静态属性和私有属性4. Es5-寄生组合式继承 1. Es6-类-class 类是创建对象的模板&#xff0c;用代码封装数据以处理该数据&#xff0c;js中的类建立在原型上。 如何定义类&#xff0c;首先需要关键字 class&#x…

C++之打造my vector篇

目录 前言 1.参照官版&#xff0c;打造vector的基本框架 2.丰富框架&#xff0c;实现接口方法 基本的迭代器实现 数据的[]访问 容量和数据空间的改变 vector空间大小的返回与判空 数据的增删 数据打印 拷贝构造和赋值重载 3.扩展延伸&#xff0c;深度理解代码 迭代器…

iText2KG:显著降低LLM构建知识图谱时的幻觉现象

1. 当前知识图谱构建存在的问题 知识图谱通过捕捉实体之间的关系来构建知识的结构化表示&#xff0c;在分析文本数据集和从结构化异构数据中推断知识方面具有显著优势。比如&#xff0c;知识图谱能够融合来自多个来源的不同数据&#xff0c;提供一个具有凝聚力的信息视角。还能…

【Python进阶】学习Python从入门到进阶,详细步骤,就看这一篇。文末附带项目演练!!!

详细的Python学习路线 1. Python基础 Python安装和环境配置&#xff1a;学习如何在你的操作系统上安装Python&#xff0c;并配置开发环境。变量和数据类型&#xff1a;学习如何定义变量&#xff0c;以及Python中的基本数据类型&#xff0c;如整数、浮点数、字符串等。 Pytho…

【人工智能学习笔记】4_3 深度学习基础之循环神经网络

循环神经网络(Recurrent Neural Network, RNN) 是一类以序列(sequence)数据为输入,在序列的演进方向进行递归(recursion)且所有节点(循环单元)按链式连接的递归神经网络(recursive neural network),循环神经网络具有短期记忆能力 RNN核心思想 RNN的结构 一个典型…

基于CNN-BiLSTM-Attention的流量预测 完整数据代码可直接运行

直接看视频: 基于CNN-BiLSTM-Attention的流量预测 完整数据代码可直接运行_哔哩哔哩_bilibili 模型: 有效提取径流时间序列的信息特征,提高径流预测模型的高维非线性拟合能力和预测性能的稳定性,将卷积神经网络(CNN),双向长短期记忆网络(BiLSTM)和注意力机制(attention)相…

tomcat端口被占用解决方法

在安装目录的conf下修改server.xml文件&#xff0c;修改后保存重启即可

十四、MySQL高级— 分库分表(7)

&#x1f33b;&#x1f33b; 目录 一、分库1.1 修改配置 schema.xml1.2 如何选择分库表1.3 SQLyog 连接 mycat 二、水平分表2.1 schema.xml2.2 rule.xml2.3 跨库join2.3.1 ER表2.3.2 全局表 2.4 全局序列2.4.1 本地文件2.4.2 数据库方式(一般都用这个)2.4.3 时间戳方式2.4.4 自…

时间序列预测学习方向总概括

推荐资源&#xff1a; 1.MA、AR、ARIMA 算法小陈-CSDN博客 2.informer论文讲解 【2024最火的两个模型&#xff1a;InformerLSTM两大时间序列预测模型&#xff0c;论文精读代码复现&#xff0c;究极通俗易懂&#xff01;——人工智能|AI|机器学习|深度学习-哔哩哔哩】 https…

微波无源器件 4 基于高阶定向耦合器的双极化波束形成网络

摘要&#xff1a; 一种Ka频段的双极化3dB定向耦合器被设计用于波束形成网络应用。所提出的解决方案对于紧凑Nolen网络。Nolen结构优于器平面和无损特别具有吸引力。两个平行方波导通过口径阵列耦合&#xff0c;设计用于获得两个正交极化之间的所需耦合和高隔离度。 索引词&…

sql语句的训练2024/9/9

1题 需要看清思路&#xff1a;不是将数据库中的device_id的名字改为user_infors_example&#xff0c;而是在查找的时候&#xff0c;需要将device_id看成user_infors_example来进行查找。 答案 select device_id AS user_infos_example FROM user_profile limit 2 2 当固定查找…

idea报错:java:错误:不支持发行版本5

问题 使用idea创建Maven项目运行是报错&#xff1a;java&#xff1a;错误&#xff1a;不支持发行版本5 解决 1.打开Settings 2.在Java compiler 里面修改和Java版本一致 然后就可以正常运行

租房市场新动力:SpringBoot大学生租房系统

第1章 绪论 1.1 课题背景 互联网发展至今&#xff0c;无论是其理论还是技术都已经成熟&#xff0c;而且它广泛参与在社会中的方方面面。它让信息都可以通过网络传播&#xff0c;搭配信息管理工具可以很好地为人们提供服务。所以各行业&#xff0c;尤其是规模较大的企业和学校等…

erlang学习: Mnesia Erlang数据库2

Mnesia数据库增加与查询学习 -module(test_mnesia).-record(shop, {item, quantity, cost}). -record(cost, {name, price}). -record(design, {info, plan}). %% API -export([insert/3,select/1,start/0]). start() ->mnesia:start().insert(Name, Quantity, Cost) ->…

大模型之三十一-音源分离

大模型之三十一-音乐分离模型 因为TTS模型训练还有几个结果没出&#xff0c;本篇先介绍一下音乐分离模型吧。其实可能你也猜到了&#xff0c;一部分TTS的数据是网上爬来的&#xff0c;这种音频可能会有背景音之类的&#xff0c;这里需要将乐器类的伴奏去掉。所以就此介绍一下本…

U盘格式化怎么办?这4款软件可以帮你进行数据恢复。

如果你的U 盘被格式化&#xff0c;里面的数据就会被清除掉了。有备份的话&#xff0c;就不用担心丢失那些重要的数据&#xff1b;如果没有备份&#xff0c;也有办法解决&#xff1b;可以用电脑自带的一些功能恢复&#xff0c;或者是使用专业的恢复软件。如果大家有需求&#xf…

【软考】信息安全

【软考】信息安全 一.信息安全基础知识 信息安全是保障信息系统和数据的保密性、完整性、可用性、可控性和可追溯性的综合措施。这五个要素是信息安全的基础&#xff0c;缺一不可。 1. 保密性 (Confidentiality) 定义: 保证信息只被授权人员访问。举例: 银行账户信息、医疗…

【JAVA】Tomcat性能优化、安全配置、资源控制以及运行模式超详细

文章目录 一、Tomcat性能优化application.yml配置maxThreads 连接数限制压缩传输AJP禁用 二、JVM方向优化设置并行垃圾回收器查看gc日志文件 三、Tomcat安全配置入侵防范禁用非法HTTP请求方法禁止目录列出防止恶意关闭服务配置HTTPS加密协议HttpOnly标记安全头配置 四、Tomcat资…