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

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

 更新時(shí)間:2017年08月01日 15:26:34   作者:專注前端30年  
這篇文章主要介紹了javascript 中select框觸發(fā)事件過程的分析的相關(guān)資料,這里對(duì)select 觸發(fā)過程進(jìn)行了深入分析,幫助大家理解這部分內(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的話,不會(huì)觸發(fā)change事件,只有在選擇不同的option時(shí)候才會(huì)觸發(fā)change事件。下面是選擇了不同的option后觸發(fā)事件的截圖:

我們可以發(fā)現(xiàn),做出改變了可以觸發(fā)input事件和change事件,而如果沒有改變或者下拉出現(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ā)事件過程的分析,如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!

相關(guān)文章

最新評(píng)論