js 鼠键事件

 1.鼠标事件

****事件	****说明
onclick	鼠标点击某个对象
ondblclick	鼠标双击某个对象
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开
onmousemove	鼠标被移动
onmousedown	某个鼠标按键被按下
onmouseup	某个鼠标按键被松开
oncontextmenu	右键事件
onmousewheel	当滚轮被滚动的时候

 

<!-- 给一个元素添加多个点击事件 -->
<style>
    .box{
        width: 300px;
        height: 300px;
        border: 1px solid #f00;
    }
</style>
<div class="box"></div>
<script>
    var oBox = document.querySelector('.box');
    // 单击
    oBox.onclick = function(){
        console.log(this);
        this.style.backgroundColor='red';
    }
    // 鼠标悬浮
    oBox.onmouseover = function(){
        this.style.backgroundColor='blue';
    }
    // 鼠标离开
    oBox.onmouseout = function(){
        this.style.backgroundColor='green';
    }
    // 双击
    oBox.ondblclick = function(){
        this.style.backgroundColor='pink';
    }
    var x = 0;
    // 鼠标移动
    oBox.onmousemove = function(){
        console.log(x++);
        // this.style.backgroundColor='orange';
    }
</script

onmouseenter 和 onmouseover的区别 1、onmouseover、onmouseout：鼠标经过时自身触发事件，经过其子元素时也触发该事件；（父亲有的东西，儿子也有） ，支持冒泡 2、onmouseenter、onmouseleave：鼠标经过时自身触发事件，经过其子元素时不触发该事件。（父亲的东西就是父亲的，不归儿子所有） ，不支持冒泡

2.键盘事件

导语：页面中有时候想要提交表单数据，直接按下enter就可以提交了；或者在玩游戏的时候可以通过WASD这四个按键来控制上下左右的方向，这就是通过键盘事件来操作的

****事件	****说明
onkeypress[使用的比较少]	键盘的某个键被按下
onkeydown	键盘的某个键被按下或按住
onkeyup	键盘的某个键被松开

一个onkeydown+onkeyup = 鼠标单击事件，想要区分键盘上的每个按键，是通过键盘的keyCode值来判断的，所以想要知道按下的是哪个按键，可以使用event.keyCode onkeydown 只要是按下的状态，就会一直触发当前事件 onkeyup 只有弹起的那一瞬间，才会触发

// 简单案例，键盘按下输出1，键盘弹起输出2
document.onkeydown = function(){
    console.log(111111111);
}
document.onkeyup = function(){
    console.log(222222222);
}

获取对应的键盘值

document.onkeyup = function(){ console.log(event.keyCode); }

 3.光标事件

****事件	****说明
onfocus	元素获得焦点
onblur	元素失去焦点

// 获取焦点，让value消失；失去焦点，显示提示信息
<input type="radio" name="" id="inp" value="请输入用户名">
<script>
  var oInp = document.getElementById('inp');
  oInp.onfocus = function(){
    oInp.value = '';
  }
  oInp.onblur = function(){
    oInp.value = '请输入用户名';
  }
</script>