1、滾輪事件

onmousewheel、DOMMouseScroll

onmousewheel：滑鼠滾輪滾動的事件，會在滾輪滾動時觸發，但是火狐不支援該屬性

DOMMouseScroll：在火狐中使用DOMMouseScroll來繫結滾動事件，注意該事件需要通過addEventListener()函式來繫結

event.wheelDelta、event.detail

event.wheelDelta：可以獲取滑鼠滾輪滾動的方向：向上滾（120），向下滾（-120），這個值我們不看大小，只看正負

event.detail：wheelDelta這個屬性火狐中不支援，在火狐中使用event.detail

return false、event.preventDefault()

當滾輪滾動時，如果瀏覽器有滾動條，滾動條會隨之滾動，這是瀏覽器的預設行為

如果不希望發生，則可以使用return false來取消預設行為

使用addEventListener()方法繫結響應函式，取消預設行為時不能使用return false，需要使用event來取消預設行為

但是 IE8 不支援event.preventDefault()這個玩意，如果直接呼叫會報錯

window.onload = function() {
    var box1 = document.getElementById("box1");
    box1.onmousewheel = function(event) {
        event = event || window.event;
        // alert(event.wheelDelta); // IE/內建：120/-120；Chrome/Edge：150/-150；Firefox：undefined/undefined
        // alert(event.detail); // IE/內建/Chrome/Edge：0/0；Firefox：-3/3;

        // 當滑鼠滾輪向下滾動時，box1變長
        // 當滑鼠滾輪向上滾動時，box1變短
        if (event.wheelDelta > 0 || event.detail < 0) {
            box1.style.height = box1.clientHeight - 10 + "px";
        } else {
            if (box1.clientHeight - 10 > 0) {
                box1.style.height = box1.clientHeight + 10 + "px";
            }
        }

        // 使用addEventListener()方法繫結響應函式，取消預設行為時不能使用return false，需要使用event來取消預設行為
        // 但是IE8不支援event.preventDefault()這個玩意，如果直接呼叫會報錯
        event.preventDefault && event.preventDefault();

        // 當滾輪滾動時，如果瀏覽器有滾動條，滾動條會隨之滾動
        // 這是瀏覽器的預設行為，如果不希望發生，則可以取消預設行為
        return false;
    };
    // 相容addEventListener
    bind(box1, "DOMMouseScroll", box1.onmousewheel);
}

function bind(obj, eventStr, callback) {
    if (obj.addEventListener) {
        obj.addEventListener(eventStr, callback, false);
    } else {
        // this是誰由呼叫方式決定
        // callback.call(obj)
        obj.attachEvent("on" + eventStr, function(){
            // 在匿名函式中呼叫回撥函式
            callback.call(obj);
        });
    }
}
 

效果

2、鍵盤事件

onkeydown、onkeyup

onkeydown按鍵被按下

• 如果一直按著某個按鍵不鬆手，則事件會一直觸發
• 連續觸發時，第一次和第二次之間會間隔稍微長一點，其他的會非常的快，這種設計是為了防止誤操作的發生

onkeyup按鍵被鬆開

鍵盤事件一般都會繫結給一些可以獲取到焦點的物件或者是document

鍵盤事件屬性

可以通過keyCode來獲取按鍵的編碼，通過它可以判斷哪個按鍵被按下

除了keyCode，事件物件中還提供了幾個屬性altKey、ctrlKey、shiftKey

這個三個用來判斷alt、ctrl和shift是否被按下，如果按下則返回true，否則返回false

<練習：鍵盤移動div>

// 定義速度
var speed = 10;
var box1 = document.getElementById("box1");
// 繫結鍵盤響應事件
document.onkeydown = function(event) {
    event = event || window.event;
    // 按ctrl加速
    speed = event.ctrlKey ? 30 : 10;
    // console.log(event.keyCode); // 左：37；上：38；右：39；下：40
    switch (event.keyCode) {
        // 左移
        case 37:
            box1.style.left = box1.offsetLeft - speed + "px";
            break;
        // 上移
        case 38:
            box1.style.top = box1.offsetTop - speed + "px";
            break;
        // 右移
        case 39:
            box1.style.left = box1.offsetLeft + speed + "px";
            break;
        // 下移
        case 40:
            box1.style.top = box1.offsetTop + speed + "px";
            break;
        default:
            break;
    }
    return false;
}

效果