select框触发事件过程
来源:互联网 发布:赫鲁晓夫 知乎 编辑:程序博客网 时间:2024/06/02 04:00
我们书写了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>
阅读全文
0 0
- select框触发事件过程
- 关于select下拉框选择触发事件
- js 触发 select onchange事件
- select onserverchang 事件没有触发
- select onchange 事件的触发
- Select下拉框动态获取数据,并触发事件
- jQuery实现select下拉框选中数据触发事件
- 【BootStrap】关于Select下拉框选择触发事件以及扩展
- select选择框通过js触发change事件
- Javascript获取select下拉框选中的的值,select中指定option选中触发事件
- 手动触发select的change事件
- js触发select的change事件
- jquery触发select的change事件失效
- js select option 选中触发事件
- 如何触发<z:select>值改变事件
- 关于select 被选中触发事件,onclick事件失效问题
- 关于select 被选中触发事件,onclick事件失效问题
- 复选框触发事件
- 线程池ThreadPoolExecutor剖析
- maven 创建helloword
- 正则表达式
- @RestController
- 2017年7月-占位
- select框触发事件过程
- c++方向笔面试推荐书籍
- hbase phoenix 插入数据
- android 设置中清除数据 重启应用
- 2017年7月-占位
- 2017年7月30日-占位
- 关于排序
- java学习初探1
- 2017年7月-占位3