欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時(shí)間：2017年08月01日 15:26:34   作者：專注前端30年  
這篇文章主要介紹了javascript 中select框觸發(fā)事件過(guò)程的分析的相關(guān)資料,這里對(duì)select 觸發(fā)過(guò)程進(jìn)行了深入分析，幫助大家理解這部分內(nèi)容，需要的朋友可以參考下

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

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

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

我們可以發(fā)現(xiàn)，做出改變了可以觸發(fā)input事件和change事件，而如果沒(méi)有改變或者下拉出現(xiàn)了直接點(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>

以上就是javascript 中select框觸發(fā)事件過(guò)程的分析，如有疑問(wèn)請(qǐng)留言或者到本站社區(qū)交流討論，感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！

相關(guān)文章

最新評(píng)論