js事件

来源：互联网发布：中文安卓编程编辑：程序博客网时间：2024/06/09 23:11

10.事件

10.1事件的概念

事件源

事件名

事件注册

事件处理程序

以火灾为例

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

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

事件名：火灾

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

事件处理：喷水作业

10.2常用事件

鼠标常用事件：

（1）click：单击事件

<body><p id="p1" onclick="fun()">单击事件测试</p></body><script>    function fun(){        //获取到指定元素        var p1 = document.getElementById("p1");        p1.style.fontSize = "50px";         p1.innerText = "我被单击了";    }</script>

在这个案例中，事件源就是id为“p1”的元素，事件名是单击，事件注册是onclick="fun()"

，也就是说当单击id为“p1”的元素时，就交由fun函数来处理

双击事件ondblclick

<style>        #div1{            width: 100px;            height: 100px;            background-color: red;        }    </style></head><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.weight = "100px";        div1.style.height = "100px";    }</script>

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

   <style>        #div1{            width: 100px;            height: 100px;            background-color: red;        }    </style></head><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>

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

<style>        #div1{            width: 100px;            height: 100px;            background-color: red;        }    </style></head><body><div id="div1" onmouseenter="zoomout()" onmouseleave="zoomin()"></div></body><script>    function zoomout(){        var div1 = document.getElementById("div1");        div1.style.width = "100px";        div1.style.height = "100px";        div1.style.backgroundColor = "blue";    }    function zoomin(){        var div1 = document.getElementById("div1");        div1.style.width = "200px";        div1.style.height = "200px";        div1.style.backgroundColor = "red";    }</script>

ommouseoner/onmouseout

与enter和leave很类似

<script>    var div1 = document.getElementById("div1");    var div2 = document.getElementById("div2");    /*div1.onmouseenter = enter1;    div2.onmouseenter = enter2;*/    div1.onmouseover = enter1;    div2.onmouseover = enter2;    /*div1.onmouseleave = leave1;    div2.onmouseleave = leave2;*/    function enter1(){        alert("进入div1");    }function enter2(){        alert("进入div2");    }    function leave1(){        alert("离开div1");    }function leave2(){        alert("离开div2");    }</script>

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

鼠标移动onmousemove

键盘事件

keypress

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

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

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

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

function search(e){    alert(e.keyCode);    if(e.shiftKey){        alert("shift也被按下了");    }    if(e.ctrlKey){        alert("ctrl也被按下了");    }}

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

<style>        #img1{            position: absolute;            top: 0;            left: 0;        }    </style></head><body onkeydown="move(event)"><img id="img1" src="小人.png"></body><script>    var top1 = 0;    var left = 0;    function move(e){        switch (e.keyCode){            case 37:left -= 5;break;            case 38:top1 -= 5;break;            case 39:left += 5;break;            case 40:top1 += 5;break;        }        var img1 =document.getElementById("img1");        img1.style.top1 = top1 + "px";        img1.style.left = left + "px";    }</script>

总结

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

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

其它事件：

onload：页面加载事件

onfocus：获得焦点的事件

onblue：失去焦点

<input type="text" id="text1" onfocus="focus1()" onblur="blur1()"></body><script>    function focus1(){        var text1 = document.getElementById("text1");        text1.style.background = "red";    }    function blur1(){        var text1 = document.getElementById("text1");        text1.style.background = "blue";    }

onchange：值改变事件

10.3事件的注册

三种方法：

1.使用onXXX属性，比如onclick=”fun（）”

2.通过js去设置元素的onXXX属性

3.通过addEventListener注册

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

后两种方法有和好处

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

第三种方式addEventListener的第一个参数是事件名，第二个参数是事件处理函数。

可以添加事件监听，当然也就可以移除，使用removeEventListener，于addEventListener使用方法一样

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

10.4捕获和冒泡

   <style>        #div1{            width: 200px;            height: 200px;            background-color: blue;        }    </style></head><body><div id="div1">    <p id="p1">捕获和冒泡的演示</p></div></body><script>    var div1 = document.getElementById("div1");    var p1 = document.getElementById("p1");    p1.addEventListener("click",click1);    div1.addEventListener("click",click2);    function click1(){        alert("段落被单击了");    }    function click2(){        alert("div被单击了");    }</script>

在这个案例中，如果点击文字，先提示段落被单击了，然后在提示div被单击了，因为div是段落的父容器，所以单击段落也就单击了div，所以两者都会触发这个事件

但是如何去规定两个事件的处理顺序

这就是事件的冒泡和捕获

冒泡：按照从内到外的顺序依次触发，默认方式

捕获：反之

阅读全文

0 0