javascript 中select框觸發(fā)事件過程的分析
javascript 中select框觸發(fā)事件過程的分析
我們書寫了mousedown,mouseup,click,input,change,focus,blur,keydowm,keydown事件綁定到了select上面,模擬客戶選擇相關(guān)事件的觸發(fā)流程:
最后發(fā)現(xiàn),觸發(fā)的過程基本上一樣,如果沒有選擇或者選擇的是當(dāng)前顯示的option的話,不會(huì)觸發(fā)change事件,只有在選擇不同的option時(shí)候才會(huì)觸發(fā)change事件。下面是選擇了不同的option后觸發(fā)事件的截圖:
我們可以發(fā)現(xiàn),做出改變了可以觸發(fā)input事件和change事件,而如果沒有改變或者下拉出現(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ā)事件過程的分析,如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
JavaScript 節(jié)點(diǎn)操作 以及DOMDocument屬性和方法
最近發(fā)現(xiàn)DOMDocument對(duì)象很重要,還有XMLHTTP也很重要 注意大小寫一定不能弄錯(cuò).2007-12-12JavaScript實(shí)現(xiàn)提交模式窗口后刷新父窗口數(shù)據(jù)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)提交模式窗口后刷新父窗口數(shù)據(jù)的方法,涉及javascript窗口交互的相關(guān)操作技巧,需要的朋友可以參考下2017-06-06JavaScript實(shí)現(xiàn)數(shù)字格式化的示例詳解
在處理數(shù)字時(shí),為了提高可讀性,我們通常會(huì)將整數(shù)部分的數(shù)字以千分位或百分位分隔,本文將詳細(xì)介紹如何使用JavaScript來實(shí)現(xiàn)數(shù)字的千分位和百分位分隔,需要的可以參考下2024-04-04javascript setAttribute, getAttribute 在不同瀏覽器上的不同表現(xiàn)
該方法把指定的屬性設(shè)置為指定的值。如果不存在具有指定名稱的屬性,該方法將創(chuàng)建一個(gè)新屬性。2010-08-08js動(dòng)態(tài)設(shè)置關(guān)鍵偵@keyframes的方法技巧
這篇文章主要給大家介紹了關(guān)于js動(dòng)態(tài)設(shè)置關(guān)鍵偵@keyframes的方法技巧,@keyframes規(guī)則通過在動(dòng)畫序列中定義關(guān)鍵幀(或waypoints)的樣式來控制CSS動(dòng)畫序列中的中間步驟,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04JS控制頁面跳轉(zhuǎn)時(shí)未請(qǐng)求要跳轉(zhuǎn)的地址怎么回事
在js中通過window.location.href控制頁面跳轉(zhuǎn)時(shí),有時(shí)會(huì)跳轉(zhuǎn)至緩存頁面,并沒有真正去請(qǐng)求要跳轉(zhuǎn)的地址,導(dǎo)致頁面數(shù)據(jù)未能及時(shí)加載刷新。怎么解決呢?下面小編給大家解答下2016-10-10uniapp基礎(chǔ)篇之上傳圖片的實(shí)戰(zhàn)步驟
應(yīng)用uni-app開發(fā)跨平臺(tái)App項(xiàng)目時(shí),上傳圖片、文檔等資源功能需求十分常見,下面這篇文章主要給大家介紹了關(guān)于uniapp基礎(chǔ)篇之上傳圖片的相關(guān)資料,需要的朋友可以參考下2022-12-12