滚轮事件WheelEvent和按键事件KeyboardEvent

1、滚轮事件WheelEvent

1）谷歌浏览器，IE浏览器，safari的滚轮事件为mousewheel

火狐浏览器的滚轮事件为DOMMouseScroll

2）谷歌，WheelEvent的一个属性是e.deltaY 向下滚动为正数，向上滚动为负数

火狐浏览器是使用e.detail 表示正数向下滚动

        //滚轮事件WheelEvent
        //先创建一个有滚轮的界面
        document.body.innerHTML += Array(100).fill('1<br>').join('');
        //谷歌浏览器，IE浏览器，safari
        document.addEventListener('mousewheel', mouseHandler);
        // 火狐浏览器
        // document.addEventListener("DOMMouseScroll",mouseHandler)
        function mouseHandler(e) {
            console.log(e);
        }

2、按键事件KeyboardEvent

KeyboardEvent的一些属性

• code:"ArrowLeft"  按下键名  区分左右
• key:"ArrowLeft" 按下键名
• keyCode:37  键码 建议使用
  • 左上右下按键的keyCode分别是37 38 39 40
• which:37  键码  新的
• repeat:true 重复按键

        document.addEventListener('keydown', keyHandler);
        document.addEventListener('keyup', keyHandler);
        function keyHandler(e) {
            console.log(e);
        }