首页 > 编程语言 >javascript学习 - DOM 事件

javascript学习 - DOM 事件

时间:2024-08-02 20:28:01浏览次数:18  
标签:function 函数 DOM javascript 学习 事件 监听 鼠标

事件

什么是事件

在之前 DOM 的学习中,我们主要学习了如何获取 DOM 元素,并且学会了如何给获取的元素进行属性修改等操作。但这些基本都是静态的修改,并没有接触到一些动作。而今天要学习的事件,其实就是这些动作的总称。

所谓事件,就是在编程时系统内所发生的动作或者发生的事情,比如在网页中点击一个按钮之后,我们就能实现登录或者注册之类的功能。

事件监听

事件监听,就是让程序检测是否有事件产生,一旦有事件触发,就立即调用一个函数做出响应,这个过程就叫做注册事件。其语法结构如下:

元素.addEventListener('事件', 要执行的函数);

要实现事件监听,要同时包含以下三要素:

  • 事件源:也就是上面语法中所对应的元素,指的是谁发出的事件,也就是网页中哪个 DOM 元素被事件所触发。
  • 事件:以何种方式触发,比如鼠标单击 click
  • 事件调用函数:也就是语法结构中要执行的函数,我们触发事件后,需要去做什么。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>DOM 事件</title>
	</head>
	<body>
		<button>点击开始</button>
		<script>
			let btn = document.querySelector('button');
			btn.addEventListener('click', function() {
				alert('马上开始');
			});
		</script>
	</body>
</html>

以上就是一个事件监听的实例,通过在网页中点击按钮,就会执行事件调用函数,弹窗显示内容。

事件类型

学习了事件的定义以及如何实现一个最简单的事件监听,接下来就来看看,Web API 中为 DOM 提供的常用事件类型有哪些。

主要有 4 种类型的事件,分为:

  • 鼠标事件
  • 焦点事件
  • 键盘事件
  • 文本事件

以下就分别来看看这些类型的事件又可以细分为哪些小类。

  1. 鼠标事件
事件说明
click鼠标点击
mouseenter鼠标经过
mouseleave鼠标离开
  1. 焦点事件
事件说明
focus获得焦点
blur失去焦点
  1. 键盘触发
事件说明
keydown键盘按下触发
keyup键盘抬起触发
  1. 文本事件
事件说明
input用户输入事件

高阶函数

高阶函数,简单的说可以被理解为函数的高级应用,JavaScript 中函数能够当成值来对待,然后基于这个值来实现函数的高级应用。

函数表达式

函数表达式其实和普通的函数没有本质上的区别,以下是一个函数表达式和一个普通函数。

  • 函数表达式
let sum1 = function(x, y) {
    return x + y;
}
  • 普通函数
function sum2(x, y){
    return x + y;
}

在调用时,可以发现调用方式其实都一样,两者最终得到的结果也一致。

// 函数表达式调用
sum1(10, 20);
// 普通函数调用
sum2(10, 20);

回调函数

如果有两个函数 A 和 B,假设我们将函数 A 作为参数传递给函数 B,那么我们此时将函数 A 叫做 回调函数。总结来说就是如果一个函数被当做参数来传递给另一个函数时,则这个被当做参数的函数就叫做回调函数。

function A(){
    ……
}
// 此时 A 就是一个回调函数
setInterval(A, 100);

环境对象

环境对象是指函数内部特殊的变量 this,它代表着当前函数运行时所处的环境。

JavaScript 中,this 不是固定不变的,它会随着执行环境的变化而变化。this 在不同位置,也有着不同的含义。

位置含义
方法中this 表示该方法所属的对象
单独使用this 表示全局对象
函数中this 表示全局对象
事件中this 表示接收事件的元素
  1. 方法中

假设有一个对象,则此时对象方法 info 中的 this 就代表 hero 这个对象。

let hero = {
    name: '伽罗',
    sex: '女',
    info: function(){
        return this.name + " , " + this.sex;
    }
}
  1. 单独使用

单独使用时,this 指向了全局对象。

let num = this;
alert(num);

在这里插入图片描述

  1. 函数中

函数中使用 this 时,同样指向全局对象。

function func(){
    return this;
}
alert(func());

在这里插入图片描述

总结

本文主要从什么是事件、如何实现事件监听和常见的事件类型三个方面介绍了关于事件的知识点。此外,从函数表达式和回调函数对函数的高阶用法做了简要介绍。最后则是对使用最多的 this 在不同环境中使用时所代表的一些含义。

标签:function,函数,DOM,javascript,学习,事件,监听,鼠标
From: https://blog.csdn.net/paofuluolijiang/article/details/140739708

相关文章

  • Redis学习[5] ——Redis过期删除和内存淘汰
    六、Redis过期键值删除6.1Redis的过期键值删除策略6.1.1什么是过期键值删除?Redis中是可以对key设置过期时间的,所以需要有相应的机制将已过期的键值对删除,也就是**过期键值删除策略。Redis会用一个过期字典(expiresdict)**来存储有过期时间的所有key。当查询一个key时,Red......
  • PCIe学习笔记(15)
    设备就绪状态(DeviceReadinessStatus,DRS)消息(DeviceReadinessStatus(DRS)是PCIe规范中引入的一种机制,旨在改进设备初始化和就绪状态的检测与报告。在以往的PCIe版本中,系统通常依赖于固定的超时机制来判断设备是否已经成功初始化并准备好进行数据传输。然而,这种方法存......
  • PCIe学习笔记(13)
    电源管理消息电源管理消息的定义规则如下:•电源管理消息的定义如表所示。•电源管理消息不包括数据负载(TLP类型是Msg)。•Length字段保留。•对于PM_Active_State_Nak消息,请求者ID中的功能号字段必须包含发送消息的下游端口的功能号,或者000b,以便与早期版本兼容。•对于......
  • Java学习记录
    对java进行配置通过下载jdk文件,然后在系统中设置环境变量,将新建变量JAVA_HOME,写入正确的jdk文件的路径接着在path中新建变量,将jdk的文件路径导入测试jdk是否安装成功:打开cmd在运行框输入cmd,如果显示如下信息则表示jdk安装成功Java语言的版本JavaSE​标准版,是为开发......
  • JavaScript 中的闭包和事件委托
    包(Closures)闭包是JavaScript中一个非常强大的特性,它允许函数访问其外部作用域中的变量,即使在该函数被调用时,外部作用域已经执行完毕。闭包可以帮助我们实现数据的私有化、封装和模块化,使代码更简洁、易读和可维护。闭包的定义简单来说,闭包是指有权访问另一个函数作用域中......
  • 【眼疾病识别】图像识别+深度学习技术+人工智能+卷积神经网络算法+计算机课设+Python+
    一、项目介绍眼疾识别系统,使用Python作为主要编程语言进行开发,基于深度学习等技术使用TensorFlow搭建ResNet50卷积神经网络算法,通过对眼疾图片4种数据集进行训练('白内障','糖尿病性视网膜病变','青光眼','正常'),最终得到一个识别精确度较高的模型。然后使用Django框架开发Web网......
  • C高级(学习)2024.8.2
    目录1.指针函数概念格式2.函数指针概念格式基本用法3.函数指针数组概念格式  4.共用体格式定义共用体变量特性5.枚举定义格式6.存储类型(1)auto(2)static(3)extern(4)register7.条件编译(1)根据宏是否定义(2)根据宏值(3)防止头文件重复包含(放在头文件中)1.指针函......
  • c语言学习 volatile __attribute__ const
    1volatile在C语言中,volatile是一个类型修饰符,用于告诉编译器某个变量的值可能会被外部因素改变,从而避免编译器对该变量进行优化。这在多线程编程或硬件编程中非常重要。用法volatileintmyVar;何时使用volatile硬件寄存器:当变量映射到某个硬件寄存器。中断服务例......
  • PgStatement的executeCachedSql(String sql, int flags, String @Nullable [] column
    方法代码如下:privatebooleanexecuteCachedSql(Stringsql,intflags,String@Nullable[]columnNames)throwsSQLException{//第一部分PreferQueryModepreferQueryMode=connection.getPreferQueryMode();booleanshouldUseParameterized=false;......
  • SpringCloud入门学习笔记(四)
    Sentinel篇 SpringCloud入门学习笔记(一)-CSDN博客SpringCloud入门学习笔记(二)-CSDN博客SpringCloud入门学习笔记(三)-CSDN博客前言 在互联网应用过程中,有很多的高并发访问场景,类似于双十一这种活动,特点是访问量剧增,访问量超出系统所能处理的最大并发数。 如果没有保护机......