鼠标的常用事件

事件的概念

事件源

事件名

事件注册

事件处理

以火灾为例：

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

事件源：XX大酒店201房间

事件名：火灾

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

事件处理：喷水 

常用事件

鼠标常用事件：

（1）click单机事件

empty
<script>
    function fun(){
        //获取到指定元素
        var p1 = document.getElementById("p1");
        p1.innerText = "我被单机了！";
        p1.style.fontSize = "60px";
    }
</script>

单击事件测试

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

 

（2）double-click双击事件 

empty


    
    
    
    
    


    
    
    

    
    
    

<script>
    function zoomout(){
        var div1 = document.getElementById("div1");
        div1.style.width = "200px";
        div1.style.height = "200px";
    }
    function zoomin(){
        var div1 = document.getElementById("div1");
        div1.style.width = "100px";
        div1.style.height = "100px";
    }
</script>

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

empty


    
    
    
    
    


    
    
    


    
    
    

<script>
    function zoomout(){
        var div1 = document.getElementById("div1");
        div1.style.width = "200px";
        div1.style.height = "200px";
    }
    function zoomin(){
        var div1 = document.getElementById("div1");
        div1.style.width = "100px";
        div1.style.height = "100px";
    }
</script>

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

empty


    
    
    
    
    


    
    
    


    
    
    

<script>
    function red(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "red";
    }
    function blue(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "blue";
    }
</script>

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

empty


    
     
     
    
    


    
     
     


    
     
     

<script>
    function red(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "red";
    }
    function blue(){
        var div1 = document.getElementById("div1");
        div1.style.backgroundColor = "blue";
    }
</script>

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

empty


    
     
     
    
    


    
     
     


    
     
     
    鼠标的坐标


<script>
    function move(e){
        var div1 = document.getElementById("p1");
        div1.innerText = e.clientX + "," + e.clientY;//鼠标在div1里面的坐标
    }
</script>

图片跟着鼠标一起移动

empty


    
     
     
    
    


    
     
     


    
     
     
    
    鼠标的坐标


<script>
    function move(e){
        var div1 = document.getElementById("p1");
        var img1 = document.getElementById("img1");
        div1.innerText = e.clientX + "," + e.clientY;//鼠标在div1里面的坐标
        img1.style.top = e.clientY + "px";
        img1.style.left = e.clientX + "px";
    }
</script>

（7）鼠标滚动（onmousewheel）

empty


    
   
   
    
    



    
   
   


    
   
   

<script>
    var width = 100;
    var height = 100;
    function wheel(e){
        if(e.wheelDelta > 0){
            width += 5;
            height += 5;
        }else{
            width -= 5;
            height -= 5;
        }
        var div1 = document.getElementById("div1");
        div1.style.width = width + "px";
        div1.style.height = height + "px";
    }
</script>