1.鼠标类 - 失去和获取焦点。

    onfocus : 获得焦点，处于激活状态。

    onblur: 失去焦点

    // var input = document.querySelector(‘input’);

    // var span = document.querySelector(‘span’);

    // input.onfocus = function() {

    // span.innerHTML = ‘请输入用户名’;

    // };

    // input.onblur = function() {

    // if (this.value == ‘’) {

    // span.innerHTML = ‘用户名不能为空’;

    // }

    // };

    2.鼠标类 - 鼠标移入移出

    onmouseover:当用户将鼠标指针移动到对象内时触发

    onmouseout:当用户将鼠标指针移出对象边界时触发

    // var button = document.querySelector(‘button’);

    // var box = document.querySelector(‘.box’);

    // button.onmouseover = function() {

    // box.style.display = ‘block’;

    // };

    // button.onmouseout = function() {

    // box.style.display = ‘none’;

    // };

    3.鼠标类 - 鼠标按下，鼠标抬起，鼠标移动

    onmousedown：鼠标按下

    onmouseup：鼠标抬起

    onmousemove：鼠标移动

    onclick = onmousedown + onmouseup

    获取鼠标的位置属性:clientX,clientY

    获取鼠标相对于当前元素的位置：offsetX, offsetY

    // 案例：将鼠标的位置给box1盒子当定位用。

    // var box1 = document.querySelector(‘.box1’);

    // document.onmousemove = function(e) { //鼠标在文档中移动

    // box1.style.left = e.clientX - box1.offsetWidth / 2 + ‘px’;

    // box1.style.top = e.clientY - box1.offsetHeight / 2 + ‘px’;

    // };

    oncontextmenu:右键