JavaScript中的鼠标事件

var oDiv = document.querySelector(‘div‘);
oDiv.onclick = function(){
    console.log(‘这是一个左键单击事件‘);
}

var oDiv = document.querySelector(‘div‘);
oDiv.ondbclick = function(){
    console.log(‘这是一个左键双击事件‘);
}

var oDiv = document.querySelector(‘div‘);
oDiv.oncontextmenu = function(){
    console.log(‘这是一个右键单击事件‘);
}

var oDiv = document.querySelector(‘div‘);
//只要按下就触发，不分左右键
oDiv.onmousedown = function(){
    console.log(‘鼠标按下事件‘);
}

var oDiv = document.querySelector(‘div‘);
//只要抬起就触发，不分左右键
oDiv.onmouseup = function(){
    console.log(‘鼠标离开事件‘);
}

//每经过一个子级都会触发一次
var oDiv = document.querySelector(‘div‘);
oDiv.onmouseover = function(){
    console.log(‘鼠标over事件‘);
}
//只触发一次，父级触发后，经过子级不再触发
var oDiv = document.querySelector(‘div‘);
oDiv.onmouseenter = function(){
    console.log(‘鼠标enter事件‘);
}

//经过父级不触发，从父级离开，并进入子级或其他级触发
var oDiv = document.querySelector(‘div‘);
oDiv.onmouseout = function(){
    console.log(‘鼠标out事件‘);
}
//进入父级不触发，进入子级也不触发，离开父级触发
var oDiv = document.querySelector(‘div‘);
oDiv.onmouseleave = function(){
    console.log(‘鼠标leave事件‘);
}

//鼠标在父级里面，每移动一步都会触发效果，小幅度移动也被记录
var oDiv = document.querySelector(‘div‘);
oDiv.onmousemove = function(){
    console.log(‘鼠标move事件‘);
}