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 相关文章推荐
HTML代码中标签的全部属性 中文注释说明
Mar 26 Javascript
js中判断Object、Array、Function等引用类型对象是否相等
Aug 29 Javascript
Ionic快速安装教程
Jun 03 Javascript
jquery siblings获取同辈元素用法实例分析
Jul 25 Javascript
JS根据生日月份和日期计算星座的简单实现方法
Nov 24 Javascript
ES6新特性之Object的变化分析
Mar 31 Javascript
利用require.js与angular搭建spa应用的方法实例
Jul 19 Javascript
vue多种弹框的弹出形式的示例代码
Sep 18 Javascript
Node.js JSON模块用法实例分析
Jan 04 Javascript
详解微信小程序之scroll-view的flex布局问题
Jan 16 Javascript
微信小程序实现语音识别转文字功能及遇到的坑
Aug 02 Javascript
详解Vue.js 响应接口
Jul 04 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
增加反向链接的101个方法 站长推荐
2007/01/31 PHP
php下实现农历日历的代码
2007/03/07 PHP
PHP与MySQL开发中页面乱码的产生与解决
2008/03/27 PHP
PHP 远程关机实现代码
2009/11/10 PHP
ThinkPHP使用心得分享-上传类UploadFile的使用
2014/05/15 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
php PDO实现的事务回滚示例
2017/03/23 PHP
红米手机抢购的js代码
2014/03/10 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
javascript:void(0)是什么意思及href=#与href=javascriptvoid(0)的区别
2015/11/13 Javascript
JavaScript知识点总结(十一)之js中的Object类详解
2016/05/31 Javascript
AngularJS 作用域详解及示例代码
2016/08/17 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
JS实现的适合做faq或menu滑动效果示例
2016/11/17 Javascript
js学使用setTimeout实现轮循动画
2017/07/17 Javascript
BootStrap TreeView使用实例详解
2017/11/01 Javascript
vue项目中vue-i18n和element-ui国际化开发实现过程
2018/04/25 Javascript
浅谈微信JS-SDK 微信分享接口开发(介绍版)
2018/08/15 Javascript
vue做移动端适配最佳解决方案(亲测有效)
2018/09/04 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
2020/07/19 Javascript
介绍Python中的文档测试模块
2015/04/28 Python
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
TensorFlow实现卷积神经网络CNN
2018/03/09 Python
python中利用matplotlib读取灰度图的例子
2019/12/07 Python
python中逻辑与或(and、or)和按位与或异或(&amp;、|、^)区别
2020/08/05 Python
复古风格的女装和装饰品:ModCloth
2017/12/29 全球购物
大学生最新职业生涯规划书范文
2014/01/12 职场文书
社区中秋节活动方案
2014/01/29 职场文书
社区八一活动方案
2014/02/03 职场文书
采购类个人求职的自我评价
2014/02/18 职场文书
党的群众路线教育学习材料
2014/05/12 职场文书
2015年学校德育工作总结
2015/04/22 职场文书
2015年团委副书记工作总结
2015/07/23 职场文书
求职信如何撰写?
2019/05/22 职场文书
一文搞懂php的垃圾回收机制
2021/06/18 PHP
opencv检测动态物体的实现
2021/07/21 Python