- 資訊首頁(yè) > 開(kāi)發(fā)技術(shù) >
- javascript中select框觸發(fā)事件的過(guò)程
本篇內容主要講解“javascript中select框觸發(fā)事件的過(guò)程”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強。下面就讓小編來(lái)帶大家學(xué)習“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ā)現，觸發(fā)的過(guò)程基本上一樣，如果沒(méi)有選擇或者選擇的是當前顯示的option的話(huà)，不會(huì )觸發(fā)change事件，只有在選擇不同的option時(shí)候才會(huì )觸發(fā)change事件。下面是選擇了不同的option后觸發(fā)事件的截圖：
我們可以發(fā)現，做出改變了可以觸發(fā)input事件和change事件，而如果沒(méi)有改變或者下拉出現了直接點(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> 免責聲明：本站發(fā)布的內容（圖片、視頻和文字）以原創(chuàng )、來(lái)自互聯(lián)網(wǎng)轉載和分享為主，文章觀(guān)點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權請聯(lián)系QQ:712375056 進(jìn)行舉報，并提供相關(guān)證據，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權內容。
Copyright ? 2009-2021 56dr.com. All Rights Reserved. 特網(wǎng)科技 特網(wǎng)云 版權所有 珠海市特網(wǎng)科技有限公司 粵ICP備16109289號
域名注冊服務(wù)機構:阿里云計算有限公司（萬(wàn)網(wǎng)） 域名服務(wù)機構：煙臺帝思普網(wǎng)絡(luò )科技有限公司（DNSPod） CDN服務(wù)：阿里云計算有限公司 中國互聯(lián)網(wǎng)舉報中心 增值電信業(yè)務(wù)經(jīng)營(yíng)許可證B2
建議您使用Chrome、Firefox、Edge、IE10及以上版本和360等主流瀏覽器瀏覽本網(wǎng)站
