Note source: Still silicon Valley latest version of the full set of JavaScript basic tutorial complete version (140 sets of actual combat teaching,JS from entry to master)_ bilibili _bilibili

[TOC]

Scroll events and keyboard events

1. Wheel events

Onmousewheel, DOMMouseScroll

Onmousewheel: event for mousewheel scrolling. This is triggered when the wheel is scrolling, but Firefox does not support this property

DOMMouseScroll: Use DOMMouseScroll in Firefox to bind the scroll event. Note that this event is bound by the addEventListener() function

Event. WheelDelta, event. The detail

Event. wheelDelta: You can get the direction of the mouse wheel scroll: up (120), down (-120), we don’t look at the size of this value, just positive and negative

Event. detail: wheelDelta is not supported in Firefox. In Firefox, use event.detail to get the scroll direction: Scroll up (-3), scroll down (3).

Return false, the event. The preventDefault ()

When the scroll wheel scrolls, if the browser has a scroll bar, the scroll bar scrolls with it, which is the default behavior of the browser

If you do not want this to happen, you can use return false to cancel the default behavior

Use the addEventListener() method to bind the response function. Instead of using return False to cancel the default behavior, you need to use event to cancel the default behavior

The event.preventDefault() option is not supported in IE8 and will give an error if called directly

window.onload = function() {
    var box1 = document.getElementById("box1");
    box1.onmousewheel = function(event) {
        event = event || window.event;
        // alert(event.wheelDelta); // IE/ built-in: 120/-120; Chrome/Edge: 150 / - 150; Firefox: undefined/undefined
        // alert(event.detail); // IE/ Built-in /Chrome/Edge: 0/0; Firefox: - 3/3;

        // Box1 becomes longer when the mouse wheel is rolled down
        // Box1 gets shorter when the mouse wheel is rolled up
        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"; }}// Use the addEventListener() method to bind the response function. You cannot cancel the default behavior with return false. You need to cancel the default behavior with event
        // However, IE8 does not support event.preventDefault()
        event.preventDefault && event.preventDefault();

        // If the browser has a scroll bar when the scroll wheel scrolls, the scroll bar will scroll accordingly
        // This is the default behavior of the browser. You can cancel the default behavior if you don't want it to happen
        return false;
    };
    / / compatible addEventListener
    bind(box1, "DOMMouseScroll", box1.onmousewheel);
}

function bind(obj, eventStr, callback) {
    if (obj.addEventListener) {
        obj.addEventListener(eventStr, callback, false);
    } else {
        // Who this is depends on how the call is made
        // callback.call(obj)
        obj.attachEvent("on" + eventStr, function(){
            // Call the callback function in an anonymous functioncallback.call(obj); }); }}Copy the code

The effect

2. Keyboard events

The onkeydown, onkeyup

The onKeyDown button is pressed

• If you hold down a key all the time, the event will keep firing
• When firing continuously, the interval between the first and second is slightly longer, and the others are very fast, which is designed to prevent misoperation

The onKeyUp button is released

Keyboard events are usually bound to objects or documents that can get focus

Keyboard event properties

You can use keyCode to get the code of the key and determine which key is pressed

In addition to keyCode, several properties altKey, ctrlKey, and shiftKey are provided in the event object

This is used to determine if Alt, CTRL, and Shift were pressed, and returns true if so, false otherwise

< exercise: Keyboard move div>

// Define the speed
var speed = 10;
var box1 = document.getElementById("box1");
// Bind keyboard response events
document.onkeydown = function(event) {
    event = event || window.event;
    // Press CTRL to accelerate
    speed = event.ctrlKey ? 30 : 10;
    // console.log(event.keyCode); // left: 37; On: 38; Right: 39; Bottom: 40
    switch (event.keyCode) {
        / / shift to the left
        case 37:
            box1.style.left = box1.offsetLeft - speed + "px";
            break;
        / / up
        case 38:
            box1.style.top = box1.offsetTop - speed + "px";
            break;
        / / moves to the right
        case 39:
            box1.style.left = box1.offsetLeft + speed + "px";
            break;
        / / move down
        case 40:
            box1.style.top = box1.offsetTop + speed + "px";
            break;
        default:
            break;
    }
    return false;
}
Copy the code

The effect