问题
javascript 高级语言程序设计里面在事件那一章的鼠标事件里面有这么一句话
只有在同一个元素上相继触发 mousedown 和 mouseup 事件,才会触发 click 事件
如果 mousedown 和 mouseup 中的任意一个被取消,就不会触发 click 事件
我们来试一下
<div id="myDiv">
<input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
var btn =document.getElementById("myBtn");
btn.addEventListener("click",function(){
console.log("click");
btn.addEventListener("mousedown",function(){
console.log("mousedown");
},false);
btn.addEventListener("mouseup",function(){
console.log("mouseup");
},false);
</script>
注意这里点击的时候要按住了,然后移开,这就相当于取消了 mouseup 的事件,所以点击事件也取消了,那么,是不是真的只有先触发 mousedown 和 mouseup 才能触发 click 事件呢
javascript 高级程序设计上面在介绍 click 的事件时有这么一句
click:在用户单击主鼠标按钮或者按下回车键的时候触发
只有在同一个元素上相继触发 mousedown 和 mouseup 事件,才会触发 click 事件
如果 mousedown 和 mouseup 中的任意一个被取消,就不会触发 click 事件
这里把两句放在一起进行对比
那么问题就来了,按下回车会触发 mousedown 和 mouseup 事件吗
结果如下
并没有触发 mousedown 和 mouseup 事件,显然,这句话对回车键是无效的
这时候,我们想到了 keydown 和 keypress,我们修改代码如下
<div id="myDiv">
<input type="button" value="Click Me" id="myBtn">
</div>
<script type="text/javascript">
var btn =document.getElementById("myBtn");
btn.focus();
btn.addEventListener("click",function(){
console.log("click");
},false);
btn.addEventListener("keypress",function(){
console.log("keypress");
},false);
btn.addEventListener("keydown",function(){
console.log("keydown");
},false);
btn.addEventListener("keyup",function(){
console.log("keyup");
},false);
</script>
我们给键盘添加了 keydown 和 keypress 事件
那么他们的触发顺序是怎么样的呢
从图中可以看出,click 事件 在 keydown 和 keypress 之后
结论
那么有什么地方可以用到这个东西呢,即又需要点击,又需要用键盘的地方,想了一下好像并没有,只不过又深入了解了一下事件的机制。如果有的话也请大佬告知。