035-Web前端-JS-鼠标事件

鼠标事件
#6.18 小篇

---

鼠标事件类型

鼠标单击触发：click
鼠标双击触发：dblclick
鼠标按下触发：mousedown
鼠标抬起触发：mouseup
鼠标移动触发：mousemove

鼠标移入触发(不冒泡)： mouseenter
鼠标移出触发(不冒泡)： mouseleave
鼠标移入触发(冒泡)： mouseover
鼠标移出触发(冒泡)： mouseout

---

鼠标事件原则

语法：元素.on+鼠标事件名称 = 调用函数
说明：
a.dom0级可以给同一个元素绑顶多个不同类型的事件
b.事件互相之间互不影响
c.默认是冒泡事件
d.mouseenter和mouseleave两个事件不冒泡触发。

---

鼠标事件举例

单双击

div.onclick=function(){
    console.log('单击有效');
}
div.ondblclick=function(){
    console.log('双击666');
}
document.body.ondblclick=function(){
    console.log("双击body有效");	//冒泡
}

鼠标移动

div.onmousemove=function(){
    //event对象，仅在函数内部使用，表示事件本身
    //clientX  clientY  ,表示鼠标在视口中的坐标
    var x=event.clientX;
    var y=event.clientY;
    console.log('(x,y):('+x+','+y+')');
}

鼠标移入与移出：

var div1= document.querySelector('.div1');
var div2= document.querySelector('.div2');
//鼠标移入移出触发（不冒泡）
div2.addEventListener('mouseenter',function(){
     console.log('鼠标进入div2区域');
 })
div1.addEventListener('mouseenter',function(){
     console.log('鼠标进入div1区域');
 })
div2.addEventListener('mouseleave',function(){
     console.log('鼠标移出div2区域');
 })
div1.addEventListener('mouseleave',function(){
     console.log('鼠标移出div1区域');
 })
//鼠标移入移出触发（冒泡）
div2.addEventListener('mouseover',function(){
    console.log('鼠标进入div2区域');
})
div1.addEventListener('mouseover',function(){
    console.log('鼠标进入div1区域');
})
div2.addEventListener('mouseout',function(){
    console.log('鼠标移出div2区域');
})
div1.addEventListener('mouseout',function(){
    console.log('鼠标移出div1区域');
})