js 事件

来源：互联网发布：snmp trap协议端口号编辑：程序博客网时间：2024/06/14 06:18

事件

1. 事件的概念

事件源

事件名

事件注册

事件处理

以火灾为例：

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

事件源：粤商大酒店201房间

事件名：火灾

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

事件处理：喷水、灭火

2. 常用事件

鼠标的常用事件：

（1）单击事件

<pid="p1" onclick="fun()">单击事件</p>
</body>
<script>
    function fun(){

        var p1 = document.getElementById("p1");
        p1.innerText= "我被单击了！";
        p1.style.fontSize="60px"
    }
</script>

在这个案例中，事件源就是id 为 p1 的元素，事件名是单击，时间注册是onclick="fun，也就是说当点击id 为p1 的元素时，就交由fun函数来处理

（2）双击事件：

<body>
<div id="div1"onclick="zoomout()"ondblclick="zoomin()">

</div>
</body>
<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）

<body>
<div id="div1"onmousedown="zoomout()"onmouseup="zoomin()">

</div>
</body>
<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）

<divid="div1" onmouseenter="zoomin()"onmouseleave="zoomout()">

</div>
</body>
<script>
    function zoomout(){
        var div1 = document.getElementById("div1");
        div1.style.width= "200px";
        div1.style.height= "200px";
        div1.style.backgroundColor="red";
    }

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

（1） onmouseover，onmouseout

与（onmouseenter，onmouseleave）类似，区别后边再讲。

<script>
    var div1= document.getElementById("div1");
    var div2= document.getElementById("div2");
    /*div1.onmouseenter= enter1;//它会阻止冒泡
    div2.onmouseenter = enter2;*/
    div1.onmouseover =enter1;
    div2.onmouseover=enter2;//它不会
    function enter1(){
        alert("进入div1");
    }
    function enter2(){
        alert("进入div2");
    }

</script>

当使用msouseenter事件时，当里层的div触发进入事件时，处理完了就完事了（阻断冒泡）；而使用mouseover事件时，当里层的div触发进入事件时，处理完了还会冒泡给父容器处理进入事件。

（2）鼠标移动 onmsousemove

<divid="div1" onmousemove="move(event)">

</div>
鼠标的坐标<p id="p1"></p>
</body>
<script>
    function move(e){
        var p1 = document.getElementById("p1");
        p1.innerText= e.clientX+","+e.clientY;
    }

</script>

（3）鼠标的滚动

<script>
    var width= 100;
    var height= 100;

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

    }

</script>

键盘事件：

（1） keypress

<inputid="what" type="text" onkeypress="search(event)"/>
</body>
<script>
    function search(e){
        if(e.keyCode==13){
            varwhat= document.getElementById("what");
            alert("开始搜索"+what.value)
        }
    }
</script>

KeyCode属性记录了按下的键的编码。

Keypress事件只能捕获可以打印字符的按键，不能捕获诸如 shift、ctrl、alt等不可打印字符的按键。

但是可以通过shiftkey、ctrlkey等属性判断在击键的同时是否按下了shift、ctrl等辅助键。

（2） keydown 、keyup可以捕获键盘上所有的键（个别的除外）。

<bodyonkeydown="move(event)">

<img id="img1" src="55ee31f080d8e7022.jpg"alt=""/>

</body>
<script>
    var top1 = 0;
    var left = 0;
    function move(e){
        switch (e.keyCode){
            case37:left-=5; break;
            case38:top1-=5; break;
            case39:left+=5; break;
            case40:top1+=5; break;
        }
        var img1 = document.getElementById("img1");
        img1.style.top= top1+"px";
        img1.style.left= left+"px";
    }

</script>

总结：

（1）使用变量top导致上下移动失败，原因是和window.top这个全局变量冲突了，换个变量名就好了。

（2）如果把变量top1和left移入函数中，发现只能移动5像素，原因是函数内部的局部变量在每次调用函数是都会重新创建并初始化，也就是说每一次调用top和left的值都是0，不会保留上一次的值，如果想要值不变，那就必须使用全局变量。

其他事件：

Onload：页面加载事件

Onfocus：获得焦点的事件

Onblur：失去焦点事件

Onchange：

10.3 事件的注册

三种方法：

（1）使用onxxx属性比如onclick=”fun()”

（2）通过js去设置元素的onxxx属性

（3）通过addEventListener注册

<script>

    var txt1= document.getElementById("txt1");
    //注册事件的第二种方法
    txt1.onblur =blur1;
    //注册事件的第三种方法
    txt1.addEventListener("change",functionchange(e){

        alert("值改变了");
    });
    function focus1(){

        var txt1= document.getElementById("txt1");
        txt1.style.backgroundColor="red";
    }
    function blur1(e){

        var txt1= document.getElementById("txt1");
        txt1.style.backgroundColor="blue";
    }

后两种方法有何好处？将页面的内容、样式和行为分离，内容和样式可能是美工人员去完成，行为（实际上就是js的内容）往往是程序员的事情。分离后利于分工合作。

第三种方式 addEventListener的第一个参数事件名，第二个参数事件处理函数。可以添加事件监听，当然也就可以移除，用的是removeEventListener参数是一样的。

而且通过addEventListener和removeEventListener甚至我们可以去动态地去注册不同的事件处理程序。

阅读全文

0 0