APIs --- DOM事件进阶

news2025/1/15 22:38:42

1. 事件流

事件流指的是事件完整执行过程中的流动路径
任意事件被触发时总会经历两个阶段：【捕获阶段】和【冒泡阶段】

事件捕获

概念：从DOM的根元素开始去执行对应的事件（从外到里）

捕获阶段是【从父到子】的传导过程

代码：DOM.addEventListener事件类型, 事件处理函数, 是否使用捕获机制)

  • addEventListener第三个参数传入true 代表是捕获阶段触发(很少使用)
  • 若传入false代表冒泡阶段触发，默认就是false
  • 若是用L0事件监听，则只有冒泡阶段，没有捕获
const fa = document.querySelector('.father')
    const son = document.querySelector('.son')
    // 山东  济南  蓝翔   目标（pink老师）  捕获阶段
    //  蓝翔  济南   山东   冒泡阶段
    document.addEventListener('click', function () {
      alert('我是爷爷')
    }, true)
    fa.addEventListener('click', function () {
      alert('我是爸爸')
    }, true)
    son.addEventListener('click', function () {
      alert('我是儿子')
    }, true)

事件冒泡

概念：当一个元素的事件被触发时，同样的事件将会在该元素的所有祖先元素中依次被触发。这一过程被称为事件冒泡

冒泡阶段是【从子向父】的传导过程

简单理解：当一个元素触发事件后，会依次向上调用所有父级元素的 同名事件

  • 事件冒泡是默认存在的
  • L2事件监听第三个参数是 false，或者默认都是冒泡
const father = document.querySelector(' .father' )
const son = document.querySelector('.son')

document.addEventListener( 'click', function (){
	alert('我是爷爷')
})
fa.addEventListener('click',function () {
	alert('我是爸爸')
})
son.addEventListener('click', function () {
	alert("我是儿子')
})

实际工作都是使用事件冒泡为主

阻止冒泡

问题：因为默认就有冒泡模式的存在，所以容易导致事件影响到父级元素

需求： 若想把事件就限制在当前元素内，就需要阻止事件冒泡

前提：阻止事件冒泡需要拿到事件对象

语法：事件对象.stopPropagation()

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

const father = document.querySelector(' .father' )
const son = document.querySelector('.son')

document.addEventListener( 'click', function (){
	alert('我是爷爷')
})
fa.addEventListener('click',function () {
	alert('我是爸爸')
})
son.addEventListener('click', function (e) {
	alert("我是儿子')
	//组织流动传播
	e.stopPropagation()
})

解绑事件

on事件方式，直接使用null覆盖偶就可以实现事件的解绑

语法：

//L0事件移除
const btn= document.querySelector(' .button' )
// 绑定事件
btn.onclick = function () {
	alert('点击了' )
}
// 解绑事件
btn.onclick = null

const btn= document.querySelector(' .button' )
function fn() {
	alert('点击了')
}
btn.addEventListener('click', fn)
// L2 事件移除解绑
btn.removeEventListener('click',fn)

阻止元素默认行为

某些情况下需要阻止默认行为的发生，比如 阻止 链接的跳转，表单域跳转

语法： e.preventDefault()

 <form action="http://www.itcast.cn">
    <input type="submit" value="免费注册">
  </form>
  <a href="http://www.baidu.com">百度一下</a>
  <script>
    const form = document.querySelector('form')
    form.addEventListener('submit', function (e) {
      // 阻止默认行为  提交
      e.preventDefault()
    })

    const a = document.querySelector('a')
    a.addEventListener('click', function (e) {
      e.preventDefault()
    })
  </script>

鼠标经过事件的区别

鼠标经过事件:
mouseover和 mouseout 会有冒泡效果 mouseenter 和 mouseleave 没有冒泡效果(推荐)

两种注册事件的区别

传统on注册 (L0)

  • 同一个对象,后面注册的事件会覆盖前面注册(同一个事件)
  • 直接使用null覆盖偶就可以实现事件的解绑
  • 都是冒泡阶段执行的

事件监听注册 (L2)

  • 语法:addEventListener(事件类型,事件处理函数，是否使用捕获)
  • 后面注册的事件不会覆盖前面注册的事件(同一个事件)
  • 可以通过第三个参数去确定是在冒泡或者捕获阶段执行
  • 必须使用removeEventListener(事件类型,事件处理函数取捕获或者冒泡阶段
  • 匿名函数无法被解绑

2. 事件委托

事件委托是利用事件流的特征(事件冒泡）解决一些现实开发需求的知识技巧，主要的作用是提升程序效率。

优点：减少注册次数，可以提高程序性能

原理：事件委托其实是利用事件冒泡的特点

  • 给父元素注册事件，当我们触发子元素的时候，会冒泡到父元素身上，从而触发父元素的事件

实现：事件对象.target.tagName可以获得真正触发事件的元素
在这里插入图片描述

<!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>

<body>
  <ul>
    <li>第1个孩子</li>
    <li>第2个孩子</li>
    <li>第3个孩子</li>
    <li>第4个孩子</li>
    <li>第5个孩子</li>
    <p>我不需要变色</p>
  </ul>
  <script>
    // 点击每个小li 当前li 文字变为红色
    // 按照事件委托的方式  委托给父级，事件写到父级身上
    // 1. 获得父元素
    const ul = document.querySelector('ul')
    ul.addEventListener('click', function (e) {
      // alert(11)
      // this.style.color = 'red'
      // console.dir(e.target) // 就是我们点击的那个对象
      // e.target.style.color = 'red'
      // 我的需求，我们只要点击li才会有效果
      if (e.target.tagName === 'LI') {
        e.target.style.color = 'red'
      }
    })
  </script>
</body>

</html>

3. 其他事件

页面加载事件

load事件

加载外部资源（如图片、外联CSS和JavaScript等）加载完毕时触发的事件

原因：

  1. 有些时候需要等页面资源全部处理完了做一些事情
  2. 老代码喜欢把script写在head中，这时直接找dom元素找不到

事件名：load

监听页面所有资源加载完毕：给window添加load事件

// 页面加载事件
window.addEventListener('load', function() {
    // 执行的操作
})

DOMContentLoaded

当初始的 HTML文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像等完全加载

事件名：DOMContentLoaded
监听页面DOM加载完毕：给document添加DOMContentLoaded 事件

document.addEventListener( 'DOMContentLoaded', function (){
	// 执行的操作
}

元素滚动事件

滚动条在滚动的时候持续触发事件

原因：很多网页需要检测用户把页面滚动到某个区域后做一些处理，比如固定导航栏、返回顶部

事件名：scroll

监听整个页面滚动：给window或document添加scroll事件

// 页面滚动事件
window.addEventListener('scroll', function() {
    // 执行的操作
})

获取位置

scrollLeft和scrollTop (属性)

  • 获取被卷去的大小
  • 获取元素内容往左、往上滚出去看不到的距离
  • 这两个值是可读写的

尽量在scroll事件里面获取被卷去的距离

div.addEventListener( 'scroll,function (){
	console.log(this.scrollTop)
})

在这里插入图片描述

<!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>
  <style>
    body {
      padding-top: 100px;
      height: 3000px;
    }

    div {
      display: none;
      margin: 100px;
      overflow: scroll;
      width: 200px;
      height: 200px;
      border: 1px solid #000;
    }
  </style>
</head>

<body>
  <div>
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字
    我里面有很多很多的文字

  </div>
  <script>
    const div = document.querySelector('div')
    // 页面滚动事件
    window.addEventListener('scroll', function () {
      // console.log('我滚了')
      // 我想知道页面到底滚动了多少像素， 被卷去了多少  scrollTop
      // 获取html元素写法  
      // document.documentElement  
      // console.log(document.documentElement.scrollTop)
      const n = document.documentElement.scrollTop
      if (n >= 100) {
        div.style.display = 'block'
      } else {
        div.style.display = 'none'
      }
    })
    // const div = document.querySelector('div')
    // div.addEventListener('scroll', function () {
    //   // console.log(111)
    //   // scrollTop 被卷去的头部
    //   console.log(div.scrollTop)
    // })
  </script>
</body>
</html>

scrollTop (属性)的小细节

<script>
    document.documentElement.scrollTop = 800
    window.addEventListener('scroll', function () {
      // 必须写到里面
      const n = document.documentElement.scrollTop
      // 得到是什么数据   数字型 不带单位
      // console.log(n)
    })
  </script>
页面滚动事件-滚动到指定的坐标

scrollTo()方法可把内容滚动到指定的坐标
语法：元素.scrollTo(x,y)

// 让页面滚动到 y 轴10像素的位置
window.scrol1To(0，1000)

页面尺寸事件

会在窗口尺寸改变的时候触发事件：resize

window.addEventListener('resize',function (){
	// 执行的代码
}

检测屏幕宽度：

window.addEventListener('resize', function () {
	let w = document.documentElement.clientWidth
	console.log(w)
})
页面尺寸事件 – 获取元素宽高

获取宽高：clientwidth和clientHeight
获取元素的可见部分宽高(不包含边框，margin，滚动条等)

4. 元素尺寸与位置

获取宽高:

  • 获取元素的自身宽高、包含元素自身设置的宽高、padding、border
  • offsetwidth和offsetHeight
  • 获取出来的是数值,方便计算
  • 注意: 获取的是可视宽高，如果盒子是隐藏的,获取的结果是0

获取位置:

  • 获取元素距离自己定位父级元素的左、上距离
  • offsetLeft和offsetTop 注意是只读属性

获取位置：element.getBoundingClientRect()方法返回元素的大小及其相对于视口的位置

在这里插入图片描述

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

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

相关文章

基于SSM框架开发的小区物业管理系统JavaWeb项目源码

基于SSM框架开发的小区物业管理系统JavaWeb项目源码

随着信息化时代的到来&#xff0c;小区的管理也日趋完善&#xff0c;开始逐步采用信息化系统对小区业主进行管理&#xff0c;对一些业务进行线上处理。小区物业管理系统正是为了满足这种需求而诞生的&#xff0c;也有不少同学会选择该课题作为毕业设计项目选题&#xff0c;下面…
阅读更多...
【Unity入门】9.帧更新

【Unity入门】9.帧更新

【Unity入门】帧更新 大家好&#xff0c;我是Lampard~~ 欢迎来到Unity入门系列博客&#xff0c;所学知识来自B站阿发老师~感谢 &#xff08;一&#xff09;获取挂载对象的属性信息 &#xff08;1&#xff09;获取名字信息 首先在C#代码中&#xff0c;this代表着脚本本身&#…
阅读更多...
MySQL 事务和视图

MySQL 事务和视图

&#x1f389;&#x1f389;&#x1f389;点进来你就是我的人了 博主主页&#xff1a;&#x1f648;&#x1f648;&#x1f648;戳一戳,欢迎大佬指点!人生格言&#xff1a;当你的才华撑不起你的野心的时候,你就应该静下心来学习! 欢迎志同道合的朋友一起加油喔&#x1f9be;&am…
阅读更多...
Machine Learning-Ex3（吴恩达课后习题）Multi-class Classification and Neural Networks

Machine Learning-Ex3（吴恩达课后习题）Multi-class Classification and Neural Networks

目录 1. Multi-class Classification 1.1 Dataset 1.2 Visualizing the data 1.3 Vectorizing Logistic Regression 1.3.1 Vectorizing the cost function&#xff08;no regularization&#xff09; 1.3.2 Vectorizing the gradient&#xff08;no regularization&#…
阅读更多...
【ESP-IDF】如何安装ESP-IDF？

【ESP-IDF】如何安装ESP-IDF？

【ESP-IDF】如何安装ESP-IDF&#xff1f;Windows命令行安装ESP-IDFVs Code 图形IDE首先参考这篇视频&#xff1a;https://www.bilibili.com/blackboard/webplayer/embed-whitelist-other.html?aid520120377&bvidBV1hM411k7zz&cid888070526&page1本篇教程以Windows…
阅读更多...
vue2路由守卫

vue2路由守卫

全局前置_路由守卫 以前古代有一个职称叫御前侍卫&#xff1a;保护君王的安全&#xff0c;而路由守卫就是保护路由的安全&#xff08;权限&#xff09; 就是在Home组件中&#xff0c;我们需要先校验内容中的school是否满足要求&#xff0c;才能展示组件&#xff0c;否则不展示…
阅读更多...
SpringBoot项目中遇到的订单支付超时未支付关闭订单的解决方案

SpringBoot项目中遇到的订单支付超时未支付关闭订单的解决方案

1、扫表轮循 定时任务 > 获取数据 > 数据层 > 筛选出过期的数据 > 批量关闭超时订单 优点&#xff1a;实现简单、适用于小项目、数据量比较少 缺点&#xff1a;订单量过大的时候查询和修改数据库压力大、服务器内存消耗大、IO瓶颈 2、Redis懒删除 用户获取订单信…
阅读更多...
java SSM选房管理系统idea开发mysql数据库java编程计算机网页源码maven项目

java SSM选房管理系统idea开发mysql数据库java编程计算机网页源码maven项目

一、源码特点 SSM选房管理系统是一套完善的完整医院类型系统&#xff0c;结合SSM&#xff08;SpringSpringMVCMyBatis&#xff09;框架和bootstrap完成本系统&#xff0c;对理解JSP java编程开发语言有帮助系统采用SSM框架&#xff08;MVC模式开发&#xff09;&#xff0c;系…
阅读更多...
Twitter的推荐系统开源了，Twitter的推荐系统是什么样的呢？Twitter推荐系统的架构说明

Twitter的推荐系统开源了，Twitter的推荐系统是什么样的呢？Twitter推荐系统的架构说明

Twitter的推荐系统开源了&#xff0c;Twitter的推荐系统是什么样的呢&#xff1f;Twitter推荐系统的架构说明01. Twitter的推荐系统是什么样的&#xff1f;02. Candidate Sources2.1 In-Network Source2.2 Out-of-Network Sources03. Ranking04. Heuristics, Filters, and Prod…
阅读更多...
VR虚拟核电设备拆除模拟培训降低风险

VR虚拟核电设备拆除模拟培训降低风险

核电站设备拆除是一项高危、复杂的任务&#xff0c;因此进行安全、有效的培训至关重要。为此&#xff0c;将VR虚拟现实技术应用于核电厂中&#xff0c;通过100%模拟还原真实的拆除操作场景&#xff0c;广泛应用到核电厂展示、巡检和拆除等环节中&#xff0c;极大提高了生产效率…
阅读更多...
单片机学习之中断与定时/计数器

单片机学习之中断与定时/计数器

记录学习中断的使用。 1. 使用工具 使用开发板&#xff1a; 普中科技开发板 编译软件&#xff1a; keil 2. 复习中断及相关概念 CPU在处理 事件A 时&#xff0c;中断源 发出中断请求&#xff0c;请求cpu处理事件B &#xff0c;cpu 中断 当前工作&#xff0c;转去处理事件B&a…
阅读更多...
HTML5 视频 Video

HTML5 视频 Video

文章目录HTML5 视频 VideoWeb站点上的视频浏览器支持HTML5 (视频)- 如何工作视频格式与浏览器的支持视频格式HTML5 \<video> - 使用 DOM 进行控制HTML5 Video 标签HTML5 视频 Video 很多站点都会使用到视频. HTML5 提供了展示视频的标准。 Web站点上的视频 直到现在&am…
阅读更多...
详解数据恢复多少一个g以及如何恢复

详解数据恢复多少一个g以及如何恢复

整理电脑硬盘数据的时候不小心删除了重要的文件该如何么恢复呢?硬盘修复数据恢复价格都爱的贵不贵?今天小编就来给大家重点当前市场上硬盘数据恢复的价格相关内容&#xff0c;那么数据恢复多少钱一个g呢?下面就来给大家揭晓一下数据恢复多少钱一个g以及如何恢复。 工具/原料…
阅读更多...
全国青少年电子信息智能创新大赛(决赛)python·模拟三卷，含答案解析

全国青少年电子信息智能创新大赛(决赛)python·模拟三卷，含答案解析

全国青少年电子信息智能创新大赛（决赛) python 模拟三卷 一、程序题 第一题：描述 现有 n 个人依次围成一圈玩游戏，从第 1 个人开始报数，数到第 m 个人出局，然 后从出局的下一个人开始报数，数到第 m 个人又出局，...，如此反复到只剩下 最后一个是胜利者。设 n 个人的编号…
阅读更多...
常用 Composition API--工程文件及setup

常用 Composition API--工程文件及setup

官方文档: https://v3.cn.vuejs.org/guide/composition-api-introduction.html 分析工程结构 vue3新添加的东西或修改的内容 首先import { createApp } from vue引入的不再是Vue的构造函数了&#xff0c;而是一个createAPP的工厂函数&#xff0c;什么是工厂函数&#xff1f; …
阅读更多...
【TimeSerias】Transformer

【TimeSerias】Transformer

Sequence 1. rnn 和 cnn RNN 很难并行化CNN很难捕捉较远的信息 2. Self-attention 拿每个query q去对每个 key k做attention 计算输出 Self-attition 矩阵计算 qiWqaikiWkqiviWvaiQWqAKWkAVWvA(1.1)\begin{align*} q^i & W^q a^i \\ k^i & W^k q^i \\ v^i & W…
阅读更多...
WordPress图片水印插件 Easy Watermark

WordPress图片水印插件 Easy Watermark

1、概述 WordPress图片水印插件Easy Watermark 是一款实现上传图片自动添加水印LOGO功能的高效插件。当我们在WordPress网站后台上传图片文件到媒体库时&#xff0c;或者在发布文章上传图片时&#xff0c;Easy Watermark 都能为图片自动添加水印&#xff0c;同时&#xff0c;还…
阅读更多...
《计算机网络-自顶向下》06. 链路层和局域网

《计算机网络-自顶向下》06. 链路层和局域网

文章目录链路层概述链路层提供的服务链路层在何处实现差错检测和纠正技术奇偶校验循环冗余检测多路访问协议信道划分协议随机接入协议时隙 ALOHAALOHA载波侦听多路访问 —— CSMA具有碰撞检测的载波侦听多路访问 —— CSMA/CDCSMA/CD 效率轮流协议DOCSIS&#xff1a;用于电缆因…
阅读更多...
c++11 标准模板（STL）（std::stack）（五）

c++11 标准模板（STL）（std::stack）（五）

定义于头文件 <stack> template< class T, class Container std::deque<T> > class stack; std::stack 类是容器适配器&#xff0c;它给予程序员栈的功能——特别是 FILO &#xff08;先进后出&#xff09;数据结构。 该类模板表现为底层容器的包…
阅读更多...
C++实现：学生管理系统（详细解析）

C++实现：学生管理系统（详细解析）

目录 1.题目要求 2.需求分析 3.整体设计 4.详细设计 主函数设计 学科科目类 主菜单 读取文件与写入文件 效果如下 添加学生信息 删除学生信息 ​编辑 修改学生信息 显示信息列表 显示学生列表 将学生列表按学号升序排列 将学生列表按平均分降序排列&#xff0c;平…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023