鼠标事件
#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区域');
})