鼠标移动: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>
事件委托:将子元素将要执行的事件委托给父元素,父元素执行事件时,通过事件对象,来判断是哪个子元素触发的事件。
事件冒泡:事件由内部向外部传播,外层如果有相同的事件,也会触发