鼠标的常用事件

事件的概念

事件源

事件名

事件注册

事件处理

以火灾为例：

       XX大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场通过喷水作业成功灭火。

事件源：XX大酒店201房间

事件名：火灾

事件注册：事先已经规划好片区，XX大酒店所属片区归南湖区消防支队负责

事件处理：喷水 

常用事件

鼠标常用事件：

（1）click单机事件

empty
单击事件测试

在这个案例中，事件源就是id为”p1”的元素，事件名是单机，事件注册是onclick=”fun()”，也就是说当单机id为”p1”的元素的时候，即交由fun函数来处理。

 

（2）double-click双击事件 

empty                    #div1{            width: 100px;            height: 100px;            background-color: #FF0000;        }        
    

（3）鼠标按下/弹起（onmousedown onmouseup）

empty                    #div1{            width: 100px;            height: 100px;            background-color: #FF0000;        }        
    

（4）鼠标移入/离开（onmouseenter onmouseleave）

empty                    #div1{            width: 100px;            height: 100px;            background-color: #FF0000;        }        
    

（5）鼠标在上面/出去（onmouseover onmouseout）效果与（4）一样，但是有区别

empty                    #div1{            width: 100px;            height: 100px;            background-color: #FF0000;        }        
    

（6）鼠标移动时（onmousemove）可以获取鼠标坐标

empty                    #div1{            width: 300px;            height: 300px;            background-color: skyblue;        }        
    
    鼠标的坐标

图片跟着鼠标一起移动

empty                    #div1{            width: 300px;            height: 300px;            background-color: skyblue;        }        #img1{            position: absolute;            top: 0;            left: 0;            width: 25px;            height: 25px;        }        
    
        鼠标的坐标

（7）鼠标滚动（onmousewheel）

empty                    #div1{            width: 100px;            height: 100px;            background-color: aqua;        }