欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

javascript 中select框触发事件过程的分析

程序员文章站 2022-11-25 08:50:49
javascript 中select框触发事件过程的分析 我们书写了mousedown，mouseup，click，input，change，focus，blur，key...

javascript 中select框触发事件过程的分析

我们书写了mousedown，mouseup，click，input，change，focus，blur，keydowm，keydown事件绑定到了select上面，模拟客户选择相关事件的触发流程：

最后发现，触发的过程基本上一样，如果没有选择或者选择的是当前显示的option的话，不会触发change事件，只有在选择不同的option时候才会触发change事件。下面是选择了不同的option后触发事件的截图：

javascript 中select框触发事件过程的分析

我们可以发现，做出改变了可以触发input事件和change事件，而如果没有改变或者下拉出现了直接点击 别的地方，则不会促发这两个事件：

javascript 中select框触发事件过程的分析

附上代码：

<!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框触发事件过程的分析，如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

上一篇： 详解jquery选择器的原理

下一篇： 原生js获取left值和top值的三种方法

推荐阅读