1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > js 多选框被选中触发的事件_javascript多选框的触发过程详解

js 多选框被选中触发的事件_javascript多选框的触发过程详解

时间:2022-09-16 00:23:01

相关推荐

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");

});

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。