关于 click 事件的一个小坑

问题

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 之后

结论

那么有什么地方可以用到这个东西呢，即又需要点击，又需要用键盘的地方，想了一下好像并没有，只不过又深入了解了一下事件的机制。如果有的话也请大佬告知。