JavaScript鼠标事件

鼠标单击是触发：click鼠标双击是触发：dblclick
鼠标按下时触发：mousedown
鼠标抬起时触发：mouseup
鼠标移动时触发：mousemove
div.addEventListener(‘mousedown’,function(){console.log(‘这是按下事件’);});
div.addEventListener(‘mouseup’,function(){console.log(‘这是抬起事件’);});

结论：
(1)dom0可以给同一个元素绑定多个【不同类型的事件】
(2)事件互相之间的执行互不影响
div.onclick = function(){console.log(‘这是单击事件’);};
div.ondblclick = function(){console.log(‘这是双击事件’);};

扩展属性：
event对象：在绑定事件的函数中可以直接使用的对象，这个对象表示事件本身。
event.clientX: 当事件被触发的时候，鼠标当前的x坐标
event.clientY: 当事件被触发的时候，鼠标当前的y坐标
div.addEventListener(‘mousemove’,function(){
console.log(‘鼠标当前的坐标(x,y)为：(’+event.clientX+’,’+event.clientY+’)’);
});

//案例
var flag = false;
document.addEventListener(‘mousedown’,function(){flag = true;});
document.addEventListener(‘mouseup’,function(){flag = false;});
document.addEventListener(‘mousemove’,function(){
if(flag){
div.style.left = event.clientX-50+‘px’;
div.style.top = event.clientY-50+‘px’;
}
});


视频推荐
https://www.bjsxt.com/down/9225.html
http://yun.itheima.com/course/182.html
http://video.mobiletrain.org/html5/26.html