JavaScript中的鼠标事件

利用下面这个div标签来做鼠标事件的演示，当把鼠标在‘我是div’和’我是span‘两个位置及其之外的位置上操作时，不同事件操作结果不同

<div class="div1">我是div

　　<br>

<span>我是span</span>

</div>

1、左键单击事件 click

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

2、左键双击事件 dbclick

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

3、右键单击事件 contextmenu

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

4、鼠标器按下事件 mousedown

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

5、鼠标按下抬起`` 事件 mouseup

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

6、鼠标移入事件
经过边界线触发 mouseover mouseenter

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

7、鼠标移出事件
经过边界线触发 mouseout mouseleave

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

8、鼠标移动 mousemove
鼠标再标签范围内移动，会触发事件，类似于hover

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

JavaScript中的鼠标事件

猜你喜欢