本篇內容主要講解“javascript中select框觸發事件的過程”,感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷,實用性強。下面就讓小編來帶大家學習“javascript中select框觸發事件的過程”吧!

javascript 中select框觸發事件過程的分析
我們書寫了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>到此,相信大家對“javascript中select框觸發事件的過程”有了更深的了解,不妨來實際操作一番吧!這里是創新互聯成都網站設計公司網站,更多相關內容可以進入相關頻道進行查詢,關注我們,繼續學習!
另外有需要云服務器可以了解下創新互聯scvps.cn,海內外云服務器15元起步,三天無理由+7*72小時售后在線,公司持有idc許可證,提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業上云的綜合解決方案,具有“安全穩定、簡單易用、服務可用性高、性價比高”等特點與優勢,專為企業上云打造定制,能夠滿足用戶豐富、多元化的應用場景需求。
網站標題:javascript中select框觸發事件的過程-創新互聯
轉載源于:http://www.yijiale78.com/article6/pgoig.html
成都網站建設公司_創新互聯,為您提供App設計、品牌網站建設、全網營銷推廣、網站內鏈、ChatGPT、面包屑導航
聲明:本網站發布的內容(圖片、視頻和文字)以用戶投稿、用戶轉載內容為主,如果涉及侵權請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網站立場,如需處理請聯系客服。電話:028-86922220;郵箱:631063699@qq.com。內容未經允許不得轉載,或轉載時需注明來源: 創新互聯