javascript 中select框触发事件过程的分析
网络编程 2021-07-04 18:33www.168986.cn编程入门
这篇文章主要介绍了javascript 中select框触发事件过程的分析的相关资料,这里对select 触发过程进行了深入分析,帮助大家理解这部分内容,需要的朋友可以参考下
javascript 中select框触发事件过程的分析
我们书写了mousedown,mouseup,click,input,change,focus,blur,keydowm,keydown事件绑定到了select上面,模拟客户选择相关事件的触发流程:
最后发现,触发的过程基本上一样,如果没有选择或者选择的是当前显示的option的话,不会触发change事件,只有在选择不同的option时候才会触发change事件。狼蚁网站SEO优化是选择了不同的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 中select框触发事件过程的分析,如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!
编程语言
- 机械手焊接机器人编程 机械手焊接设备编程
- vb数据库编程实例,vb做数据库
- tiobe世界编程语言排行榜,全球编程语言排行
- 成都java编程培训 成都it编程培训中心
- 编程基础培训,编程基础知识培训
- flash游戏编程基础教程,flash游戏开发教程
- 不会英语能学编程吗 不会英语可以学程序员吗
- 爱心代码编程C语言 爱心代码编程c语言公式
- c语言编程学习入门 c语言编程快速入门
- 西门子plc编程培训 西门子plc编程培训班
- 哪里可以学编程 台州哪里可以学编程
- 少儿编程哪个好 少儿编程哪个品牌好
- 编程是什么意思,图形编程是什么意思
- c语言编程软件下载,c语言编程软件在哪下载
- java编程软件下载,java编程下载手机版
- ug编程培训学校,ug编程培训教程