javascript多选框的触发过程详解
这篇文章主要介绍了javascript 中select框触发事件过程的分析的相关资料,这里对select 触发过程进行了深入分析，帮助大家理解这部分内容，需要的朋友可以参考下
javascript 中select框触发事件过程的分析
我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了select上面，模拟客户选择相关事件的触发流程：
最后发现，触发的过程基本上一样，如果没有选择或者选择的是当前显示的option的话，不会触发change事件，只有在选择不同的option时候才会触发change事件。下面是选择了不同的option后触发事件的截图：
我们可以发现，做出改变了可以触发input事件和change事件，而如果没有改变或者下拉出现了直接点击 别的地方，则不会促发这两个事件：
附上代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<select name="" id="input">
<option value="1">1</option>
<option value="">2</option>
<option value="">3</option>
<option value="">4</option>
<option value="">5</option>
</select>
</body>
<script>
document.getElementById("input").addEventListener("focus",function () {
console.log("focus");
});
document.getElementById("input").addEventListener("mousedown",function () {
console.log("mousedown");
});
document.getElementById("input").addEventListener("mouseup",function () {
console.log("mouseup");
});
document.getElementById("input").addEventListener("input",function () {
console.log("input");
});
document.getElementById("input").addEventListener("change",function () {
console.log("change");
});
document.getElementById("input").addEventListener("blur",function () {
console.log("blur");
});
document.getElementById("input").addEventListener("click",function () {
console.log("click");
});
document.getElementById("input").addEventListener("keydown",function () {
console.log("keydown");
});
document.getElementById("input").addEventListener("keyup",function () {
console.log("keyup");
});
document.getElementById("input").addEventListener("select",function () {
console.log("select");
});
</script>
</html>以上是javascript多选框的触发过程详解的详细内容。更多信息请关注PHP中文网其他相关文章！
热AI工具
Undresser.AI Undress
人工智能驱动的应用程序，用于创建逼真的裸体照片
AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。
Undress AI Tool
免费脱衣服图片
Clothoff.io
AI脱衣机
AI Hentai Generator
免费生成ai无尽的。
热门文章
热工具
记事本++7.3.1
好用且免费的代码编辑器
SublimeText3汉化版
中文版，非常好用
禅工作室 13.0.1
功能强大的PHP集成开发环境
Dreamweaver CS6
视觉化网页开发工具
SublimeText3 Mac版
神级代码编辑软件(SublimeText3)
热门话题
Win11管理员权限获取详解
Mar 08, 2024 pm 03:06 PM
Windows操作系统是全球最流行的操作系统之一，其新版本Win11备受瞩目。在Win11系统中，管理员权限的获取是一个重要的操作，管理员权限可以让用户对系统进行更多的操作和设置。本文将详细介绍在Win11系统中如何获取管理员权限，以及如何有效地管理权限。在Win11系统中，管理员权限分为本地管理员和域管理员两种。本地管理员是指具有对本地计算机的完全管理权限
Oracle SQL中的除法运算详解
Mar 10, 2024 am 09:51 AM
OracleSQL中的除法运算详解在OracleSQL中，除法运算是一种常见且重要的数学运算操作，用于计算两个数相除的结果。除法在数据库查询中经常用到，因此了解OracleSQL中的除法运算及其用法是数据库开发人员必备的技能之一。本文将详细讨论OracleSQL中除法运算的相关知识，并提供具体的代码示例供读者参考。一、OracleSQL中的除法运算
推荐：优秀JS开源人脸检测识别项目
Apr 03, 2024 am 11:55 AM
人脸检测识别技术已经是一个比较成熟且应用广泛的技术。而目前最为广泛的互联网应用语言非JS莫属，在Web前端实现人脸检测识别相比后端的人脸识别有优势也有弱势。优势包括减少网络交互、实时识别，大大缩短了用户等待时间，提高了用户体验；弱势是：受到模型大小限制，其中准确率也有限。如何在web端使用js实现人脸检测呢？为了实现Web端人脸识别，需要熟悉相关的编程语言和技术，如JavaScript、HTML、CSS、WebRTC等。同时还需要掌握相关的计算机视觉和人工智能技术。值得注意的是，由于Web端的计
PHP模运算符的作用及用法详解
Mar 19, 2024 pm 04:33 PM
PHP中的模运算符（%）是用来获取两个数值相除的余数的。在本文中，我们将详细讨论模运算符的作用及用法，并提供具体的代码示例来帮助读者更好地理解。1.模运算符的作用在数学中，当我们将一个整数除以另一个整数时，会得到一个商和一个余数。例如，当我们将10除以3时，商为3，余数为1。模运算符就是用来获取这个余数的。2.模运算符的用法在PHP中，使用%符号来表示模
linux系统调用system()函数详解
Feb 22, 2024 pm 08:21 PM
Linux系统调用system()函数详解系统调用是Linux操作系统中非常重要的一部分，它提供了一种与系统内核进行交互的方式。其中，system()函数是一个常用的系统调用函数之一。本文将详细介绍system()函数的使用方法，并提供相应的代码示例。系统调用的基本概念系统调用是用户程序与操作系统内核交互的一种方式。用户程序通过调用系统调用函数来请求操作系统
Linux的curl命令详解
Feb 21, 2024 pm 10:33 PM
Linux的curl命令详解摘要：curl是一种强大的命令行工具，用于与服务器进行数据通信。本文将介绍curl命令的基本用法，并提供实际的代码示例，帮助读者更好地理解和应用该命令。一、curl是什么？curl是一个命令行工具，用于发送和接收各种网络请求。它支持多种协议，如HTTP、FTP、TELNET等，并提供了丰富的功能，如文件上传、文件下载、数据传输、代
详细解析C语言学习路线
Feb 18, 2024 am 10:38 AM
C语言作为一门广泛应用在软件开发领域的编程语言，是很多程序员初学者的首选。学习C语言不仅可以帮助我们建立编程的基础知识，还可以提升我们解决问题和思考的能力。本文将详细介绍一条C语言学习的路线图，帮助初学者更好地规划自己的学习进程。1.学习基本语法在开始学习C语言之前，我们首先需要了解C语言的基本语法规则。这包括变量和数据类型、运算符、控制语句（如if语句、
深入了解Promise.resolve()
Feb 18, 2024 pm 07:13 PM
Promise.resolve()详解，需要具体代码示例Promise是JavaScript中一种用于处理异步操作的机制。在实际开发中，经常需要处理一些需要按顺序执行的异步任务，而Promise.resolve()方法就是用来返回一个已经Fulfilled状态的Promise对象。Promise.resolve()是Promise类的一个静态方法，它接受一个
