js事件处理

来源：互联网发布：阿里云服务器屏蔽ip 编辑：程序博客网时间：2024/06/03 21:15

事件的概念

事件源

事件名

事件注册

事件处理

以火灾为例：

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

事件源：xxxx大酒店201。

事件名：火灾

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

事件处理：喷水

常用事件

鼠标的常用事件：

（1）单击事件

在这个案例中，事件源是id为“p1”的元素，事件名是单击，时间注册

是onlick=“fun（）”，也就是单击为“P1元素时，就交由函数处理”

（3）鼠标按下弹起（）

functionzoomout(){
            vardiv1 = document.getElementById("div1");
            div1.style.width="200px";
            div1.style.height="200px";
        }
        functionzoomin(){
            vardiv1 = document.getElementById("div1");
            div1.style.width="100";
            div1.style.height="100px";
        }

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

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

        #div1{
            width:100px;
            height:100px;
            background: red;
        }
    </style>

    <script>
        functionred(){
            vardiv1 = document.getElementById("div1");
            div1.style.backgroundColor="red";
        }
        functionblue(){
            vardiv1 = document.getElementById("div1");
            div1.style.backgroundColor="blue"
        }
    </script>
</head>
<body>
<div id="div1"onmouseenter="red()"onmouseleave="blue()"></div>
</body>

（5）onmouseover onmouseout

与onmouseenter、onmouseleave很类似，区别后面再讲

（6）鼠标的移动（move）

键盘事件

（1）keypress

functionsearch(e) {
    if(e.keyCode== 13){
        varwhat = document.getElementById("what");
        alert("开始搜索:"+what.value);

    }
}

keyCode属性记录下了按下的键的编码

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

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

（2）keydown。keyup

<input id = "what"type ="text" onkeydown="keydown(event)">
</body>
<script>
    functionkeydown(e) {
            alert(e.keyCode);
    }

keydown，keyup可以捕获键盘上所有的键

vartop1 = 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;
    }
    varimg1 =document.getElementById("img1");
    img1.style.top= top1+"px";
    img1.style.left= left+"px";
}

总结：

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

（2）如果把变量top1和left移入函数中，发现只能移动5像素。愿因是函数内部

的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top

的值都是0，不会保留上一次的值，如果需要保留，就用全局变量。

其他事件：

onload：页面的加载事件

onfocus：获得焦点的事件

onblur：失去焦点事件

onchange：值改变事件

事件的注册

三种方法：

（1）使用onXXX属性，比如：onclick=“fun()”
（2）通过js去设置元素的onXXX属性
（3）通过addEventListener注册

vartxt1 = document.getElementById("txt1");
//注册事件的第二种方法
txt1.onblur = blur1;
//注册事件的第三种方法
txt1.addEventListener("change",change);
function focus1(){
    txt1.style.backgroundColor= "blue";
}
function blur1(){
    vartxt1 = document.getElementById("txt1");
    txt1.style.backgroundColor= "red";
}
function change(){
    alert("值改变了")
}

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

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

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

捕获和冒泡

vardiv1 = document.getElementById("div1");
var p1 =document.getElementById("p1");
p1.addEventListener("click",click1);
div1.addEventListener("click",click2);
function click1(){
alert("段落被单击了")
}
function click2(){
alert("div被单击了")
}

在这个案例中，如果单击文字，先提示“段落被单击”，然后提示：“div被单击”。因为div是段落的父容器，所以单击段落也就被单击了div，所以两者都会触发这个事件。
但是如何规定这两个事件的处理顺序呢？这就是事件的冒泡和捕获。
冒泡：按照从内到外的顺序依次触发，默认方式；
捕获：反之

<head>
    <meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
    <title></title>
    <style type="">
        div{
            border:1px solid blue;
        }
        #div2{
            width:100px;
            height:100px;
            background-color: skyblue;
            margin:10px;
        }
    </style>

</head>
<body>
<div id="div1">
    <div id="div2">

    </div>
</div>
</body>
<script>
    vardiv1 = document.getElementById("div1");
    vardiv2 = document.getElementById("div2");
    div1.onmouseover =enter1;
    div2.onmouseover =enter2;
    /*div1.onmouseenter = leave1;
    div2.onmouseenter = leave2;*/
    functionenter1(){
        alert("进入div1")
    }
    functionenter2(){
        alert("进入div2")
    }
   /* function leave1(){
        alert("离开div1")
    }
    function leave2(){
        alert("离开div2")
    }*/
</script>
</html>

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

当程序员可以根据需要自己去阻断冒泡

阅读全文

0 0