【JavaScriptAPI】鼠标事件 键盘事件 浏览器事件

鼠标事件

单机事件 onclick
双击事件 ondblclick
移入事件 onmouseover
移出事件 onmouseout
进入事件 onmouseenter
离开事件 onmouseleave
按下事件 onmousedown
抬起事件 onmouseup
移动事件 onmousemove
获取焦点 onfocus
失去焦点 onblur

// 单机事件
 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('失去焦点');
 }

键盘事件

按下事件 onkeydown   
抬起事件 onkeyup

 /*  键盘事件  */
 // 按下事件
 document.getElementById('user').onkeydown= function () {
     // console.log('下起来');
 }
 // 抬起事件
 document.getElementById('user').onkeyup= function () {
     console.log('上');
 }

浏览器事件

加载完成事件 onload 
滚动事件 onscroll

    /* 浏览器事件 */
    // 滚动事件
    var num = 1
    onscroll = function () {
        num++
        console.log(num);
    }
    //加载完成事件 onload
        window.onload = function () {
        console.log('我是页面加载完成后执行');
    }