javascript多選框的觸發過程詳解-js教程-PHP中文網

javascript多選框的觸發過程詳解

巴扎黑

發布： 2017-08-14 13:49:51

原創

1405 人瀏覽過

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

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多選框的觸發過程詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！