js事件

最新推荐文章于 2018-08-06 09:38:16 发布

liuyuDo

最新推荐文章于 2018-08-06 09:38:16 发布

阅读量450

点赞数

本文链接：https://blog.csdn.net/liuyuDo/article/details/76939716

版权

10.事件

10.1事件的概念

事件源

事件名

事件注册

事件处理程序

以火灾为例

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

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

事件名：火灾

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

事件处理：喷水作业

10.2常用事件

鼠标常用事件：

（1）click：单击事件

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

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

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

双击事件ondblclick

<style>
        #div1{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="div1" οnclick="zoomout()" οndblclick="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" οnmοusedοwn="zoomout()" οnmοuseup="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" οnmοuseenter="zoomout()" οnmοuseleave="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" οnkeypress="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 οnkeydοwn="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" οnfοcus="focus1()" οnblur="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属性，比如οnclick=”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，所以两者都会触发这个事件

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

这就是事件的冒泡和捕获

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

捕获：反之

liuyuDo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js事件

10.事件10.1事件的概念事件源事件名事件注册事件处理程序以火灾为例粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，赶赴现场，通过碰水作业成功灭火事件源：粤商大酒店201房间事件名：火灾事件注册：事先已经规划好片区，粤商大酒店所属片区归南湖区消防支队负责事件处理：喷水作业 10.2常用事件鼠标常用事件：（1）click
复制链接

扫一扫