js 多选框被选中触发的事件_javascript多选框的触发过程详解
这篇文章主要介绍了javascript 中select框触发事件过程的分析的相关资料,这里对select 触发过程进行了深入分析，帮助大家理解这部分内容，需要的朋友可以参考下
javascript 中select框触发事件过程的分析
我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了select上面，模拟客户选择相关事件的触发流程：
最后发现，触发的过程基本上一样，如果没有选择或者选择的是当前显示的option的话，不会触发change事件，只有在选择不同的option时候才会触发change事件。下面是选择了不同的option后触发事件的截图：
我们可以发现，做出改变了可以触发input事件和change事件，而如果没有改变或者下拉出现了直接点击 别的地方，则不会促发这两个事件：
附上代码：
Title
1
2
3
4
5
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");
});
js 多选框被选中触发的事件_javascript多选框的触发过程详解相关推荐
- 下拉框——把一个select框中选中内容移到另一个select框中遇到的问题
在使用jQuery实现把一个select框中选中内容移到另一个select框中功能时遇到了一个问题,就是点击按钮时内容可以到另一个select框中,但是到了另一个select框中的内容却很快闪退回原来 ...
- js 条码枪扫描_使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
下面通过实例代码给大家介绍js扫码枪扫描条形码的实现方法,具体代码如下所示: var keycode = ""; var lastTime=null,nextTime; var l ...
- ZAB协议选主过程详解
说明 ZAB 协议是为分布式协调服务ZooKeeper专门设计的一种支持崩溃恢复的一致性协议.基于该协议,ZooKeeper 实现了一种主从模式的系统架构来保持集群中各个副本之间的数据一致性. ZAB ...
- JS怎么处理有些网页禁止选中复制方法过程详解
有些网站会禁止用户复制或选中网页上的内容,有时候想复制下东西的确麻烦.无奈只能手动打出来么?当然不是!我们可以重新绑定事件,让选中和右键功能正常使用. 示例网址:https://yivian.com/ ...
- 【转】JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- JS跨域（ajax跨域、iframe跨域）解决方法及原理详解（jsonp）
这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据.只要协议.域名.端口有任何一个不同,都被 ...
- python bootstrap安装_Django配置Bootstrap, js实现过程详解
1.首先在APP目录下创建一个static文件夹 如图: # Application definition INSTALLED_APPS = [ 'django.contrib.admin', 'dj ...
- python爬虫之js链接跳转抓取_Python爬虫获取页面所有URL链接过程详解
如何获取一个页面内所有URL链接?在Python中可以使用urllib对网页进行爬取,然后利用Beautiful Soup对爬取的页面进行解析,提取出所有的URL. 什么是Beautiful Soup ...
- 如何判断input复选框是否选中
<div><input type="checkbox" class="choose"/>复选框</div><scrip ...
最新文章
- 在eclipse里的 flex 没有可视化的编辑
- vsCode格式化插件
- 【Linux】一步一步学Linux——bc命令(233)
- DeDE 后台登陆广告
- Ubuntu 14.04.3 LTS 配置 DNS Server
- python一个函数调用另一个函数_在Python中将函数作为另一个函数的参数传入并调用的方法...
- 对JSON的一点认识和理解以及JQuery处理JSON
- leetcode344. 反转字符串 史上最简单力扣题
- IDEA mybatis-generator-maven-plugin 插件的使用
- 带你全面了解真正的CleanMyMac，CleanMyMac使用说明
- 杭电4554 叛逆的小明
- 【mysql5.6】数据类型
- Parallels Desktop：pd虚拟机 17 for mac
- es文件浏览器访问win10局域网共享文件能看见共享文件夹但是点击文件夹无反应
- 酷派5890详细获取ROOT、以及刷机教程
- 基于JAVA图书商城购物系统的设计与实现
- 崩坏2服务器维护,崩坏学园2（日服）无法连接服务器是什么原因
- def文件的作用及相关操作
- 【CISSP备考】AIO综合错题集
- 我的世界java村民繁殖条件,我的世界村民无限繁殖教程 教你村民怎么生孩子