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

2024-09-07 05:44
文章标签 加载 对象 页面 监听 事件 滚动 dom 尺寸 event 委托 webapi

本文主要是介绍WebAPI(二)、DOM事件监听、事件对象event、事件流、事件委托、页面加载与滚动事件、页面尺寸事件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

文章目录

  • 一、 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 = 0let num = 0// 3. 事件监听start.addEventListener('click', function () {// 如果数组中只有一个值,两个按钮禁用if (nameList.length === 1) {start.disabled = trueend.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.lengthconst comment = document.querySelector('.comment textarea')comment.addEventListener('input', function () {const left = 200 - comment.value.lengthdocument.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调用的fnfn()  // 等价于 window.fn()// buttonconst btn = document.querySelector('button');btn.addEventListener('click', function () {console.log(this); //this指的是btn对象this.style.color = 'red'})

5. 回调函数

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

  // 函数A作为参数传递给函数B时，函数A为回调函数// 使用场景1function fn () {console.log('我是回调函数');}setInterval(fn, 1000)// 使用场景2btn.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

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

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

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

scrollLeft与scrollTop：获取元素内容往左、往上滚出去看不到的距离；
这两个值是可读写的，即可读值也可赋值。一般在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.documentElementwindow.addEventListener('scroll', function () {// 这句话必须写在里面，因为要时刻获取最新的值const n = document.documentElement.scrollTop;console.log(n);})</script>

在这里插入图片描述

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

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

4. 页面尺寸事件

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

获取元素的可见部分宽高：clientWidth和clientHeight (不包含边框、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.clientWidthconsole.log(n);
})

5. 页面尺寸与位置offset

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

  • 获取元素自身宽高：offsetWidth与offsetHeight
    • 获取出来的是数值，方便计算
    • offsetWidth与offsetHeight是自身的宽高+padding+border
    • 获取的是可视宽高，如果盒子是隐藏的，获取的结果是0
  • 获取位置：offsetLeft与offsetTop
    • 获取元素距离自己有定位父级元素的左、上距离；
    • 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的值也不变

这篇关于WebAPI(二)、DOM事件监听、事件对象event、事件流、事件委托、页面加载与滚动事件、页面尺寸事件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1144217。

相关文章

禁止平板,iPad长按弹出默认菜单事件

禁止平板,iPad长按弹出默认菜单事件

通过监控按下抬起时间差来禁止弹出事件，把以下代码写在要禁止的页面的页面加载事件里面即可     var date;document.addEventListener('touchstart', event => {date = new Date().getTime();});document.addEventListener('touchend', event => {if (new
阅读更多...
如何在页面调用utility bar并传递参数至lwc组件

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件： 2.调用utility bar api的方式有两种： 方法一，通过lwc调用： import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca
阅读更多...
用命令行的方式启动.netcore webapi

用命令行的方式启动.netcore webapi

用命令行的方式启动.netcore web项目 进入指定的项目文件夹，比如我发布后的代码放在下面文件夹中 在此地址栏中输入“cmd”，打开命令提示符，进入到发布代码目录 命令行启动.netcore项目的命令为:  dotnet 项目启动文件.dll --urls="http://*:对外端口" --ip="本机ip" --port=项目内部端口 例： dotnet Imagine.M
阅读更多...
Flutter 进阶：绘制加载动画

Flutter 进阶：绘制加载动画

绘制加载动画：由小圆组成的大圆 1. 定义 LoadingScreen 类2. 实现 _LoadingScreenState 类3. 定义 LoadingPainter 类4. 总结 实现加载动画 我们需要定义两个类：LoadingScreen 和 LoadingPainter。LoadingScreen 负责控制动画的状态，而 LoadingPainter 则负责绘制动画。
阅读更多...
Java第二阶段---09类和对象---第三节 构造方法

Java第二阶段---09类和对象---第三节 构造方法

第三节 构造方法 1.概念 构造方法是一种特殊的方法，主要用于创建对象以及完成对象的属性初始化操作。构造方法不能被对象调用。 2.语法 //[]中内容可有可无 访问修饰符 类名([参数列表]){ } 3.示例 public class Car {     //车特征(属性）     public String name;//车名   可以直接拿来用 说明它有初始值     pu
阅读更多...
FreeRTOS内部机制学习03（事件组内部机制）

FreeRTOS内部机制学习03（事件组内部机制）

文章目录 事件组使用的场景事件组的核心以及Set事件API做的事情事件组的特殊之处事件组为什么不关闭中断xEventGroupSetBitsFromISR内部是怎么做的？ 事件组使用的场景 学校组织秋游，组长在等待： 张三：我到了 李四：我到了 王五：我到了 组长说：好，大家都到齐了，出发！ 秋游回来第二天就要提交一篇心得报告，组长在焦急等待：张三、李四、王五谁先写好就交谁的
阅读更多...
【经验交流】修复系统事件查看器启动不能时出现的4201错误

【经验交流】修复系统事件查看器启动不能时出现的4201错误

方法1，取得『%SystemRoot%\LogFiles』文件夹和『%SystemRoot%\System32\wbem』文件夹的权限（包括这两个文件夹的所有子文件夹的权限），简单点说，就是使你当前的帐户拥有这两个文件夹以及它们的子文件夹的绝对控制权限。这是最简单的方法，不少老外说，这样一弄，倒是解决了问题。不过对我的系统，没用； 方法2，以不带网络的安全模式启动，运行命令行，输入“ne
阅读更多...
BT天堂网站挂马事件后续：“大灰狼”远控木马分析及幕后真凶调查

BT天堂网站挂马事件后续：“大灰狼”远控木马分析及幕后真凶调查

9月初安全团队披露bt天堂网站挂马事件，该网站被利用IE神洞CVE-2014-6332挂马，如果用户没有打补丁或开启安全软件防护，电脑会自动下载执行大灰狼远控木马程序。 鉴于bt天堂电影下载网站访问量巨大，此次挂马事件受害者甚众，安全团队专门针对该木马进行严密监控，并对其幕后真凶进行了深入调查。 一、“大灰狼”的伪装 以下是10月30日一天内大灰狼远控的木马样本截图，可以看到该木马变种数量不
阅读更多...
HTML5自定义属性对象Dataset

HTML5自定义属性对象Dataset

原文转自HTML5自定义属性对象Dataset简介 一、html5 自定义属性介绍 之前翻译的“你必须知道的28个HTML5特征、窍门和技术”一文中对于HTML5中自定义合法属性data-已经做过些介绍，就是在HTML5中我们可以使用data-前缀设置我们需要的自定义属性，来进行一些数据的存放，例如我们要在一个文字按钮上存放相对应的id： <a href="javascript:" d
阅读更多...
PHP7扩展开发之对象方式使用lib库

PHP7扩展开发之对象方式使用lib库

前言 上一篇文章，我们使用的是函数方式调用lib库。这篇文章我们将使用对象的方式调用lib库。调用代码如下： <?php $hello = new hello(); $result = $hello->get(); var_dump($result); ?> 我们将在扩展中实现hello类。hello类中将依赖lib库。 代码 基础代码 这个扩展，我们将在say扩展上增加相关代码。sa
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2