鼠标、键盘、浏览器事件

一、事件绑定

一、鼠标事件
单机事件 onclick 双击事件 ondblclick 移入事件 onmouseover
移出事件 onmouseout 进入事件 onmouseenter
离开事件 onmouseleave 按下事件 onmousedown 抬起事件 onmouseup
移动事件 onmousemove 获取焦点 onfocus 失去焦点 onblur
二、键盘事件
按下事件 onkeydown 抬起事件 onkeyup
三、浏览器事件
加载完成事件 onload 滚动事件 onscroll

二、使用步骤

	// 单机事件
    head.onclick = function () {
        console.log('我被单机了');
    }
    // 双击事件
    head.ondblclick = function () {
        console.log('我被双击了');
    }
    // 移入事件
    head.onmouseover = function () {
        console.log('移入了');
        this.style.height = '200px'
    }
    // 移出事件
    head.onmouseout = function () {
        console.log('我被移出了');
        this.style.fontSize = '25px'
    }
    // 进入事件
    head.onmouseenter = function () {
        console.log('进入了');
        this.style.backgroundColor = 'red'
    }
    // 离开事件
    head.onmouseleave = function () {
        console.log('离开了');
    }
    // 按下事件
    head.onmousedown = function () {
        console.log('按下');
    }
    // 抬起事件
    head.onmouseup = function () {
        console.log('抬起');
    }
    // 移动事件
    head.onmousemove = function () {
        console.log('移动了');
    }
    // 获取焦点
    document.getElementById('user').onfocus = function () {
        console.log('获取焦点');
    }
    // 失去焦点
    document.getElementById('user').onblur = function () {
        console.log('失去焦点');
    }
    /*  键盘事件  */
    // 按下事件
    document.getElementById('user').onkeydown = function () {
        // console.log('下起来');
    }
    // 抬起事件
    document.getElementById('user').onkeyup = function () {
        console.log('上');
    }
    /* 浏览器事件 */
    // 滚动事件
    var num = 1
    onscroll = function () {
        num++
        console.log(num);
    }