[想试试看JavaScript ] 各种事件处理

事件种类

浏览器的事件有非常多种，这篇介绍一些比较常见的事件
事件处理，是指程序不会马上执行，直到触发事件的条件之後，程序就会自动执行
也就是说，比较不同的事件就是在比较不同的触发条件

滑鼠事件

click
滑鼠点击时触发。
dblclick
滑鼠「连点两次」时触发
mousedown / mouseup
滑鼠点下时触发 mousedow ，放开滑鼠触发 mouseup
mouseenter / mousemove / mouseleave
1.当滑鼠游标移入元素，会先触发 mouseenter
2.滑鼠游标在元素移动时，会连续触发 mousemove
3.滑鼠游标离开元素，触发 mouseleave

搭配事件物件

滑鼠事件很常搭配事件物件中的 event.pageX 与 event.pageY 来得到目前在网页中的座标。

可以做的效果

mousedown、mouseup、mousemove 可以做一些，点击图片或元素，接着拖曳他们移动的效果
click、dblclick 可以做一些可以给使用者修改的表单或表格只要双击滑鼠、就更改表格的内容。

键盘事件

keydown
按下键盘时会触发
keypress
按下键盘时会触发，keypress 只会针对输出文字符号的按钮有效。
所以ESC、方向键、倒退按键、大小写、shift都没有用。
keyup
放开键盘按钮时触发 keydown

如果我们对同一个元素，绑定了这三个键盘事件，这三个键盘事件触发的顺序为
keydown -> keypress -> keyup

查询按下的按钮

如果想知道，按下了什麽按钮可以透过事件物件的 event.key 来查询

下面这段程序码可以测试看看，按下了什麽按键，并且显示在主控台

<!DOCTYPE html>
<html lang="en">
<head>
    <title>键盘事件</title>
    <script>
        function init(){
            var btn=document.getElementById("btn");
            btn.addEventListener('keypress',function(e){
                console.log('按下 keypress');
                console.log('keypress: ',e.key);
            });
            btn.addEventListener('keydown',function(e){
                console.log('按下 keydown');
                console.log("keydown: ",e.key);
            })
            btn.addEventListener('keyup',function(e){
                console.log("触发 keyup");
                console.log("keyup: ",e.key);
            })
        }

    </script>
</head>
<body onload="init()">// 使用 load 事件，body 载入完成执行 init 函式
    <input type="text" id="btn">
</body>
</html>