javascript中select框觸發(fā)事件的過(guò)程

發(fā)布時(shí)間：2021-08-16 20:13:31 來(lái)源：億速云閱讀：135 作者：chen 欄目：web開發(fā)

本篇內(nèi)容主要講解“javascript中select框觸發(fā)事件的過(guò)程”，感興趣的朋友不妨來(lái)看看。本文介紹的方法操作簡(jiǎn)單快捷，實(shí)用性強(qiáng)。下面就讓小編來(lái)帶大家學(xué)習(xí)“javascript中select框觸發(fā)事件的過(guò)程”吧!

javascript 中select框觸發(fā)事件過(guò)程的分析

我們書寫了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件綁定到了select上面，模擬客戶選擇相關(guān)事件的觸發(fā)流程：

最后發(fā)現(xiàn)，觸發(fā)的過(guò)程基本上一樣，如果沒有選擇或者選擇的是當(dāng)前顯示的option的話，不會(huì)觸發(fā)change事件，只有在選擇不同的option時(shí)候才會(huì)觸發(fā)change事件。下面是選擇了不同的option后觸發(fā)事件的截圖：

javascript中select框觸發(fā)事件的過(guò)程

我們可以發(fā)現(xiàn)，做出改變了可以觸發(fā)input事件和change事件，而如果沒有改變或者下拉出現(xiàn)了直接點(diǎn)擊別的地方，則不會(huì)促發(fā)這兩個(gè)事件：

javascript中select框觸發(fā)事件的過(guò)程

附上代碼：

<!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>

到此，相信大家對(duì)“javascript中select框觸發(fā)事件的過(guò)程”有了更深的了解，不妨來(lái)實(shí)際操作一番吧！這里是億速云網(wǎng)站，更多相關(guān)內(nèi)容可以進(jìn)入相關(guān)頻道進(jìn)行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！

向AI問(wèn)一下細(xì)節(jié)

javascript中select框觸發(fā)事件的過(guò)程

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽