鼠标移动：mousemove
鼠标按下：mousedown
鼠标释放：mouseup
点击事件：click
<body>
<div class="box"></div>
<script>
var box=document.getElementById("box");
box.onmousedown=function(e){
box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY
}
box.onmouseup=function(e){
box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY
}
box.onmousemove=function(e){
box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY
}
box.onclick=function(e){
box.innerHTML="x的位置"+e.clientX+"y的位置"+e.clientY
}
//当鼠标按下，鼠标释放，和点击事件同时执行的时候，系统依次执行鼠标按下、鼠标释放、鼠标点击。
//获取X、Y的位置有两种方法。
1. e.clientX e.clientY 此方法是按照窗口左上角为原点进行获取的。
2. e.pageX e.pageY 此方法是按照文档左上角为原点进行获取的。
</script>
</body>
事件委托：将子元素将要执行的事件委托给父元素，父元素执行事件时，通过事件对象，来判断是哪个子元素触发的事件。
事件冒泡：事件由内部向外部传播，外层如果有相同的事件，也会触发
原文：https://www.cnblogs.com/zlf19971012/p/14616771.html