javascript 中select框觸發(fā)事件過(guò)程的分析
javascript 中select框觸發(fā)事件過(guò)程的分析
我們書(shū)寫(xiě)了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件綁定到了select上面，模擬客戶(hù)選擇相關(guān)事件的觸發(fā)流程：
最后發(fā)現(xiàn)，觸發(fā)的過(guò)程基本上一樣，如果沒(méi)有選擇或者選擇的是當(dāng)前顯示的option的話(huà)，不會(huì)觸發(fā)change事件，只有在選擇不同的option時(shí)候才會(huì)觸發(fā)change事件。下面是選擇了不同的option后觸發(fā)事件的截圖：
我們可以發(fā)現(xiàn)，做出改變了可以觸發(fā)input事件和change事件，而如果沒(méi)有改變或者下拉出現(xiàn)了直接點(diǎn)擊 別的地方，則不會(huì)促發(fā)這兩個(gè)事件：
附上代碼：
<!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框觸發(fā)事件過(guò)程的分析，如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
js實(shí)現(xiàn)圖片和鏈接文字同步切換特效的方法
這篇文章主要介紹了js實(shí)現(xiàn)圖片和鏈接文字同步切換特效的方法,涉及javascript操作文字及圖片的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02
微信小程序?qū)崿F(xiàn)計(jì)算器(含歷史記錄)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)計(jì)算器，含歷史記錄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-09-09
引入 TypeScript 到 Electron 項(xiàng)目可以幫助你捕捉錯(cuò)誤并在編寫(xiě)代碼時(shí)提供更好的自動(dòng)完成和文檔，這篇文章主要介紹了electron使用typescript的步驟,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了JavaScript事件對(duì)象event用法,結(jié)合實(shí)例形式分析了事件對(duì)象event中常用的屬性、方法、相關(guān)操作技巧與注意事項(xiàng),需要的朋友可以參考下2018-07-07
這篇文章主要介紹了js中的WebSocket使用及說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-02-02
JS操作XML實(shí)例總結(jié)(加載與解析XML文件、字符串)
這篇文章主要介紹了JS操作XML的方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript加載與解析XML文件及字符串的相關(guān)技巧,需要的朋友可以參考下2015-12-12
利用JS響應(yīng)式修改vue實(shí)現(xiàn)頁(yè)面的input值
這篇文章主要給大家介紹了關(guān)于如何利用JS響應(yīng)式修改vue實(shí)現(xiàn)頁(yè)面的input值，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用JS具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
url傳遞的參數(shù)值中包含&時(shí),url自動(dòng)截?cái)鄦?wèn)題的解決方法
下面小編就為大家?guī)?lái)一篇url傳遞的參數(shù)值中包含&時(shí)，url自動(dòng)截?cái)鄦?wèn)題的解決方法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
這篇文章主要為大家詳細(xì)介紹了js自定義彈框插件的簡(jiǎn)單封裝，自己封裝一個(gè)彈框插件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了javascript中閉包概念與用法,結(jié)合實(shí)例形式深入分析了javascript中閉包的概念、使用方法與相關(guān)注意事項(xiàng),需要的朋友可以參考下2016-12-12