【JS基础】事件对象event、环境对象this、事件的高级操作

文章目录

  • 一、事件对象
    • 1.1 事件对象是什么?
    • 1.2 使用方法
  • 二、环境对象this以及回调函数
    • 2.1 它是什么?
    • 2.2 演示示例
  • 三、事件的高级操作
    • 3.1 事件流
    • 3.2 事件捕获
    • 3.3 事件冒泡以及阻止冒泡
    • 3.4 事件解绑
    • 3.5 mouseover和mouseenter事件的区别
    • 3.6 事件委托
      • 它是什么?
      • 代码示例
    • 3.7 阻止使用的默认行为
  • 总结


一、事件对象

1.1 事件对象是什么?

事件对象是什么
也是个对象,这个对象里有事件触发时的相关信息
例如:鼠标点击事件中,事件对象就存了鼠标点在哪个位置等信息
使用场景
可以判断用户按下哪个键,比如按下回车键可以发布新闻
可以判断鼠标点击了哪个元素,从而做相应的操作

1.2 使用方法

在事件绑定的回调函数的第一个参数就是事件对象
一般命名为event、ev、e

示例代码:

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><button>aaa</button></body><script>const btn = document.querySelector('button')btn.addEventListener('click', function(e){console.log(e)})</script></html>

在这里插入图片描述
这个对象里面有非常多的属性,大家可以通过名称得到他的作用是什么,这里就不多赘述了

二、环境对象this以及回调函数

2.1 它是什么?

环境对象:指的是函数内部特殊的变量 this,它代表着当前函数运行时所处的环境,普通函数的this指向window,在事件函数里面指向的是触发这个函数的对象。

作用:弄清楚this的指向,可以让我们代码更简洁
函数的调用方式不同,this 指代的对象也不同
[谁调用,this 就是谁] 是判断 this 指向的粗略规则
直接调用函数,其实相当于是 window.函数,所以this 指代 window

2.2 演示示例

示例代码:

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><button>aaa</button></body><script>function fn(){console.log(this)}window.fn()const btn = document.querySelector('button')btn.addEventListener('click', function(e){console.log(this)})</script></html>

在这里插入图片描述

三、事件的高级操作

3.1 事件流

当我们在网页上进行一些交互操作,比如点击按钮或者输入文字时,浏览器会按照一定的顺序来处理这些事件。这个顺序被称为事件流。
事件流分为两种:冒泡流(Bubbling)和捕获流(Capturing)。以点击按钮为例,冒泡流表示点击按钮后,事件会从按钮开始向外层元素冒泡,而捕获流则是从外层元素开始捕获,一直到按钮。
通俗来说,就像是在水里扔了一块石头,水波会从石头的位置开始扩散,一方面水波向外扩散,另一方面水波也会向石头的位置聚拢。在事件流中,这个石头就是触发事件的元素,而水波就是事件在元素间传播的过程。
JavaScript 允许我们在事件流的不同阶段(捕获、目标、冒泡)中注册事件处理函数,通过这些函数,我们可以在不同的阶段进行操作,影响事件的处理过程。理解事件流有助于我们更好地处理和控制用户交互。

在这里插入图片描述

3.2 事件捕获

示例代码:
addEventListener参数三的作用: 一个布尔值,用于指定事件是在捕获阶段(true)还是冒泡阶段(false)调用事件处理程序。

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><button>aaa</button></body><script>document.addEventListener('click', function(){console.log('document被点击啦')},true)const btn = document.querySelector('button')btn.addEventListener('click', function(e){console.log('button被点击啦');},true)</script></html>

在这里插入图片描述

3.3 事件冒泡以及阻止冒泡

示例代码:

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><button>aaa</button></body><script>document.addEventListener('click', function(){console.log('document被点击啦')})const btn = document.querySelector('button')btn.addEventListener('click', function(e){console.log('button被点击啦');})</script></html>

在这里插入图片描述
阻止冒泡,使用这个函数阻止冒泡:

事件对象.stopPropagetion()

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

3.4 事件解绑

格式:

事件对象.removeEventListener('事件类型如click',要移除的函数名称)

示例代码:

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><button>aaa</button></body><script>function fn(){console.log('button被点击啦');}const btn = document.querySelector('button')btn.addEventListener('click', fn)btn.removeEventListener('click',fn)</script></html>

3.5 mouseover和mouseenter事件的区别

mouseover 和 mouseout 会有冒泡效果
mouseenter 和 mouseleave 没有冒泡效果(推荐)

3.6 事件委托

它是什么?

想象一下你在一个大型音乐会上,有很多观众。每个观众手里拿着一支荧光棒,而你是负责收集这些荧光棒的工作人员。你可以选择一直巡视每个观众,看看他们是否想把荧光棒给你,然后把每支都收下来。这样做确实可以,但有点费力。

现在,想象你站在舞台上,然后大声说:“谁有荧光棒要给我,都扔到舞台上来吧!”观众们听到后,就开始把荧光棒扔到舞台上。这时,你只需要站在舞台上,集中注意力收集掉在舞台上的荧光棒,而不用一个个地巡视每个观众。这就是事件委托的概念。

在 JavaScript 中,事件委托是指我们把事件监听器添加到父元素,而不是每个子元素都添加一个监听器。当事件发生时,事件会从子元素向父元素传播。这样我们只需要在父元素上处理事件,就能捕获所有子元素上发生的事件。

举个例子,如果有一个列表,你可以把点击事件监听器添加到整个列表的父元素。当用户点击列表中的任何一个项时,事件会冒泡到列表的父元素上,你就可以通过判断事件的目标来知道用户点击了哪个列表项。这样,无论列表有多长,我们只需一个监听器就能搞定,而不用给每个列表项都添加监听器,这样更高效。这就是事件委托的作用。

原理:事件委托其实是利用事件冒泡的特点
给父元素注册事件,当我们触发子元素的时候,会冒泡到父元素身上,从而触发父元素的事件

代码示例

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><div><button>TestButton</button><button>TestButton</button><button>TestButton</button><button>TestButton</button><button>TestButton</button></div>
</body><script>const div = document.querySelector('div')div.addEventListener('click', (e) => {console.log('有按钮点击啦')})</script></html>

在这里插入图片描述
我们可以使用event对象里面的target来分辨对象是哪个

3.7 阻止使用的默认行为

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

我们可以使用event对象的preventDefault函数来阻止默认行为

示例代码:

<!DOCTYPE html>
<html lang="ch">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div{width: 100px;height: 100px;background-color: pink;}</style>
</head>
<body><a href="https://baidu.com/">打开百度</a>
</body><script>const a = document.querySelector('a')a.addEventListener('click', function(e){e.preventDefault()console.log('点击了链接')})
</script></html>

在这里插入图片描述
这样我们点击链接就没用啦


总结

通过深入了解事件对象、环境对象和回调函数,我们能够更好地处理用户交互和构建动态的 Web 应用。同时,掌握事件的高级操作,如事件委托和自定义事件,使得我们能够更高效、灵活地管理事件流和通信。这些概念的深入理解对于成为一位优秀的前端开发者至关重要。

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

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

相关文章

C#学习笔记_结构体

结构体(struct)是一种值类型&#xff0c;通常用于封装一些小型变量数据。在C#面向对象编程学习时&#xff0c;可以将结构体暂时理解成一种简单的对象。 结构体语法 一、声明结构体 声明结构体语法如下&#xff1a; public struct 结构体 {public 数据类型 变量名;public 数…

树莓派基础应用:智能家居监控系统

引言&#xff1a; 随着智能家居的普及&#xff0c;家居安全与监控逐渐成为人们关注的焦点。树莓派作为一种功能强大的迷你计算机&#xff0c;为我们提供了实现智能家居监控系统的可能。在本篇博客中&#xff0c;我们将通过构建一个简单的智能家居监控系统&#xff0c;来探索树莓…

Vue<圆形旋转菜单栏效果>

效果图&#xff1a; 大家不一定非要制成菜单栏&#xff0c;可以看下人家的华丽效果&#x1f61d;&#xff0c;参考地址 https://travelshift.com/ 大佬写的效果可比我的强多了&#xff0c;但是无从下手&#xff0c;所以就自己琢磨怎么写了&#xff0c;只能说效果勉强差不多 可…

thinkadmin列表页工单状态多色显示,操作按钮条件判断

{field: gdtz, title: 工单状态, align: left, minWidth: 140,templet: function (d){if (d.gdtz==1){return "<span class=layui-badge layui-bg-cyan>" + 报装已提交 + "</span>" ;}else if (d.gdtz==2){return "

【开发用苹果电脑选择】MacBook下半部——无头骑士

开发用苹果电脑&#xff0c;16G是最低要求&#xff0c;IDEA开两个窗口内存基本满了&#xff0c;32G的苹果电脑都要2万 下面是我收集的2万苹果电脑的替代品 关键词&#xff1a;MacBook下半部下半套无头骑士 32G内存2T硬盘4300元&#xff0c;优点&#xff1a;白苹果、价格便宜

FPGA HDMI IP之DDC(本质I2C协议)通道学习

目的&#xff1a; 使用KingstVIS逻辑分析仪软件分析HDMI的DDC通道传输的SCDC数据&#xff08;遵循I2C协议&#xff09;&#xff0c;同时学习了解SCDC的寄存器与I2C通信协议。 部分英文缩写&#xff1a; HDMIHigh Definition Multi-media Interface高清多媒体接口DDCDisplay Dat…

一文讲述SASS简介和使用方法

一、什么是Sass Sass (Syntactically Awesome StyleSheets)是css的一个扩展开发工具&#xff0c;它允许你使用变量、条件语句等&#xff0c;使开发更简单可维护。这里是官方文档。 二、基本语法 1&#xff09;变量 sass的变量名必须是一个$符号开头&#xff0c;后面紧跟变量名…

优雅的管理你的docker容器【Docker Swarm篇】

如果docker容器较多时&#xff0c;可以使用docker-compose管理自己的容器组&#xff0c;但是随着容器增多&#xff0c;docker-compose也会变的复杂起来&#xff0c;如果使用k8s&#xff0c;又会比较重&#xff0c;因为k8s集群的最小运行内存为2GB&#xff0c;所以在这中间&…

【Spring Boot 3】【@Scheduled】动态新增定时任务

【Spring Boot 3】【@Scheduled】动态新增定时任务 背景介绍开发环境开发步骤及源码工程目录结构总结背景 软件开发是一门实践性科学,对大多数人来说,学习一种新技术不是一开始就去深究其原理,而是先从做出一个可工作的DEMO入手。但在我个人学习和工作经历中,每次学习新技…

深度学习 | 基于 CPU 的 tensorflow + keras + python 版本对照及环境安装

Hi&#xff0c;大家好&#xff0c;我是源于花海。要让一个基于 CPU 的 tensorflow 和 keras 开发的深度学习模型正确运行起来&#xff0c;配置环境是个重要的问题&#xff0c;本文介绍了 tensorflow 和 keras 和对应的 python 版本以及安装环境的部分流程。 目录 一、tensorfl…

Redis核心技术与实战【学习笔记】 - 3.Redis服务高可靠

1.数据同步&#xff1a;主从库如何实现数据一致&#xff1f; 前面我们学习了 AOF 和 RDB&#xff0c;如果 Redis 发生了宕机&#xff0c;它们可以分别通过回放日志和重新读入 RDB 文件的方式恢复数据&#xff0c;从而保证尽量较少丢失数据&#xff0c;提升可靠性。 不过&…

B.修改数列

给定一个长度为 n 的正整数数列 a1,a2,…,an。 你可以对其中任意个&#xff08;可以是 0 个&#xff09;元素进行修改。 但是&#xff0c;每个元素最多只能修改一次&#xff0c;每次修改&#xff1a;要么令其加 1&#xff0c;要么令其减 1。 请问&#xff0c;至少需要修改多少个…

RTP工具改进(五)--使用qt

前篇 第四篇 RTP工具改进(四) - rtmp协议推送 前面使用的工具一直为mfc&#xff0c;今天将使用qt 来做界面&#xff0c;使用qt 来进行程序和协议的编写&#xff0c;qt部分目前还不包括rtp ps流和rtmp&#xff0c;暂时只有rtp 直接传输&#xff0c;关于rtmp协议和ps流协议&…

ubuntu和树莓派下vim插件管理

目录 管理方式选择vim手动方式管理插件延迟加载加载插件帮助文档 make管理vim插件1.安装make和git2.获取vim配置仓库3.准备工作4.安装相关软件5.安装并升级vim插件6.安装vim配置相关文件7.vim恢复到初始状态 管理方式选择 插件管理器vim-plug,Vundle等都依靠github,在国内由于…

在 VUE 项目中,使用 Axios 请求数据时,提示跨域,该怎么解决?

在 VUE 项目开发时&#xff0c;遇到个问题&#xff0c;正常设置使用 Axios 库请求数据时&#xff0c;报错提示跨域问题。 那在生产坏境下&#xff0c;该去怎么解决呢&#xff1f; 其可以通过以下几种方式去尝试解决&#xff1a; 1、设置允许跨域请求的响应头 1.1 在响应头中…

STM32实现软件IIC协议操作OLED显示屏(2)

时间记录&#xff1a;2024/1/27 一、OLED相关介绍 &#xff08;1&#xff09;显示分辨率128*64点阵 &#xff08;2&#xff09;IIC作为从机的地址0x78 &#xff08;3&#xff09;操作步骤&#xff1a;主机先发送IIC起始信号S&#xff0c;然后发送OLED的地址0x78&#xff0c;然…

机器学习的数据库积累........

https://github.com/tensorflow/models/blob/master/research/object_detection/g3doc/tf1_detection_zoo.md ​​​​​​​ 另一个database:&#xff08;网址:Object Detection Made Easy with TensorFlow Hub: Tutorial&#xff09; Object Detection Made Easy with Ten…

VR拍摄+制作

1.VR制作需要的图片宽高是2:1&#xff0c;需要360✖️180的图片&#xff0c;拍摄设备主要有两种&#xff1a; 1&#xff09;通过鱼眼相机拍摄&#xff0c;拍摄一组图片&#xff0c;然后通过PTGui来合成(拍摄复杂) 2&#xff09;全景相机&#xff0c;一键拍摄直接就能合成需要的…

【动态规划】【逆向思考】【C++算法】960. 删列造序 III

作者推荐 【动态规划】【map】【C算法】1289. 下降路径最小和 II 本文涉及知识点 动态规划汇总 LeetCode960. 删列造序 III 给定由 n 个小写字母字符串组成的数组 strs &#xff0c;其中每个字符串长度相等。 选取一个删除索引序列&#xff0c;对于 strs 中的每个字符串&a…

群晖nas 中的 VideoStation 关于豆瓣刮刮和TheMovieDb无法链接问题

网上各种教学文档很多&#xff0c;但是都有各种的坑&#xff0c;这偏文章仅对坑进行修正&#xff0c;具体可以参考其他文章&#xff0c;不同点以此文章为准。 第一部分&#xff0c;豆瓣刮刮 是 VideoStation的最佳搭配&#xff0c;汉字匹配&#xff0c;速度肯定是TheMovieDb无…