快捷導(dǎo)航

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

更新時間：2017年08月01日 15:26:34 作者：專注前端30年

這篇文章主要介紹了javascript 中select框觸發(fā)事件過程的分析的相關(guān)資料,這里對select 觸發(fā)過程進行了深入分析，幫助大家理解這部分內(nèi)容，需要的朋友可以參考下

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

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

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

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

附上代碼：

<!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ū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對本站的支持！

您可能感興趣的文章: