javascript 中select框触发事件过程的分析


Posted in Javascript onAugust 01, 2017

javascript 中select框触发事件过程的分析

我们书写了mousedown,mouseup,click,input,change,focus,blur,keydowm,keydown事件绑定到了select上面,模拟客户选择相关事件的触发流程:

最后发现,触发的过程基本上一样,如果没有选择或者选择的是当前显示的option的话,不会触发change事件,只有在选择不同的option时候才会触发change事件。下面是选择了不同的option后触发事件的截图:

javascript 中select框触发事件过程的分析

我们可以发现,做出改变了可以触发input事件和change事件,而如果没有改变或者下拉出现了直接点击 别的地方,则不会促发这两个事件:

javascript 中select框触发事件过程的分析

附上代码:

<!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 中select框触发事件过程的分析,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
邮箱下拉自动填充选择示例代码附图
Apr 03 Javascript
IE中document.createElement的iframe无法设置属性name的解决方法
Sep 14 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
AngularJS 所有版本下载地址
Sep 14 Javascript
Angularjs 设置全局变量的方法总结
Oct 20 Javascript
js实现旋转木马效果
Mar 17 Javascript
浅谈Angular 中何时取消订阅
Nov 22 Javascript
微信小程序实现的点击按钮 弹出底部上拉菜单功能示例
Dec 20 Javascript
JavaScript函数的特性与应用实践深入详解
Dec 30 Javascript
JavaScript实现选项卡效果的分析及步骤
Apr 16 Javascript
layui自定义工具栏的方法
Sep 19 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 #Javascript
详解jquery选择器的原理
Aug 01 #jQuery
浅谈node中的exports与module.exports的关系
Aug 01 #Javascript
Vue2.0 组件传值通讯的示例代码
Aug 01 #Javascript
谈谈VUE种methods watch和compute的区别和联系
Aug 01 #Javascript
Angular4学习笔记之实现绑定和分包
Aug 01 #Javascript
详解js静态资源文件请求的处理
Aug 01 #Javascript
You might like
PHP中操作ini配置文件的方法
2013/04/25 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
php面试实现反射注入的详细方法
2019/09/30 PHP
国外大牛IE版本检测!现在IE都到9了,IE检测代码
2012/01/04 Javascript
jQuery.each()用法分享
2012/07/31 Javascript
js+html+css实现鼠标移动div实例
2013/01/30 Javascript
JS/FLASH实现复制代码到剪贴板(兼容所有浏览器)
2013/05/27 Javascript
jQuery控制TR显示隐藏的几种方法
2014/06/18 Javascript
jquery和js实现对div的隐藏和显示方法
2014/09/26 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(二)
2015/12/10 Javascript
jQuery中的siblings用法实例分析
2015/12/24 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
DIV随滚动条滚动而滚动的实现代码【推荐】
2016/04/12 Javascript
js利用appendChild对标签进行排序的实现方法
2016/10/16 Javascript
Node.js 实现简单的接口服务器的实例代码
2017/05/23 Javascript
基于input框覆盖掉数字英文的实例讲解
2017/07/21 Javascript
深入理解Vue 单向数据流的原理
2017/11/09 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
AjaxUpLoad.js实现文件上传
2018/03/05 Javascript
JS实现点击li标签弹出对应的索引功能【案例】
2019/02/18 Javascript
JS实现手写 forEach算法示例
2020/04/29 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
python实现矩阵和array数组之间的转换
2019/11/29 Python
Pytorch转onnx、torchscript方式
2020/05/25 Python
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
模具设计与制造专业应届生求职信
2013/10/18 职场文书
人力资源专业推荐信
2013/11/29 职场文书
棉花姑娘教学反思
2014/02/15 职场文书
房地产项目建议书
2014/03/12 职场文书
北京英文导游词
2015/02/12 职场文书
毕业论文答辩开场白和答辩技巧
2015/05/27 职场文书
追悼会答谢词范文
2015/09/29 职场文书
MySQL日期时间函数知识汇总
2022/03/17 MySQL
Python中npy和mat文件的保存与读取
2022/04/24 Python