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框觸發事件過程的分析，如有疑問請留言或者到本站社區交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！
新聞熱點
疑難解答
