事件

最新推荐文章于 2023-10-09 19:45:00 发布

LygTom

最新推荐文章于 2023-10-09 19:45:00 发布

阅读量292

点赞数 1

分类专栏：前端 js JavaScript 文章标签： js事件

本文链接：https://blog.csdn.net/LygTom/article/details/76944206

版权

前端 js JavaScript 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

大家有没有想过你在浏览网页的时候鼠标的点击，键盘的快捷键、以及网页游戏的加载这些都是怎么完成的？

这里就给大家揭秘！

1 事件的概念

以火灾为例：
粤商大酒店201房间发生火灾，119电话报警，南湖区消防支队出警，现场通过喷水作业成功灭火。
事件源：粤商大酒店201房间
事件名;火灾
事件注册：事先已经规划好片区，粤商大酒店所属片区归南湖区消防支队负责。
事件处理：喷水作业
2 常用事件
鼠标常用事件：
1.click：单击事件
<body>
<p id="p1" οnclick="fun()">单击事件注册</p>
</body>
<script language="JavaScript">
        function fun(){
            //获取到指定元素
            var p1 = document.getElementById("p1");
            p1.innerText = "我被单击了！"
            p1.style.fontSize = "60px";
        }
在这个案例中，事件源就是id为p1的元素，事件名是单击，事件注册是onclick = “fun()”，也就是说当单击id为p1的元素时，就交由fun（）函数来处理。
2.双击事件
<div id="div1" οnclick="zoomout()" οndblclick="zoomin()">

</div>
</body>
<script language="JavaScript">
   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";
   }
3.鼠标按下/弹起（ommousedown onmouseseup）
    <style type="text/css">
      #div1{
          width: 100px;
          height: 100px;
          background-color: yellow;
      }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body>
<div id="div1" οnmοusedοwn="zoomout()" οnmοuseup="zoomin()">
</div>
</body>
<script language="JavaScript">
   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";
   }
4.鼠标移入/离开 onmouseenter onmouseleave
5.onmouseover onmouseout
与onmouseenter、onmouseleave很类似
区别：
<script language="JavaScript">
    var div1 = document.getElementById("div1");
    var div2 = document.getElementById("div2");

    div1.onmouseover = enter1;
    div2.onmouseover = enter2;
/* div1.onmouseenter = enter1;
    div2.onmouseenter = enter2;*/
    function enter1(){
        alert("进入div1");
    }
    function enter2(){
        alert("进入div2");
    }
/*    function leave1(){
        alert("入第leave1");
    }
    function leave2(){
        alert("进进入第leave2");
    }*/
当使用mouseenter事件时，当里层的div触发进入事件时，处理完了就完事了，阻断“冒泡”；
而使用mouseover事件时mouseover事件时，当里层的div触发进入事件时，处理完了还会冒泡给父容器处理进入事件
6.鼠标移动：onmousemove
键盘事件：
1.Keyress
<body>
<input id="what" type="text" οnkeypress="search(event)"/>
</body>
<script language="JavaScript">
    function search(e){
        var what = document.getElementById("what");
        alert("开始搜索"+what.value)
    }
</script>
1.keyCode属性记录了按下的键的编码
2.Keypress 事件只能捕获可打印字符的按键，不能捕获诸如shift ctrl等辅助键
3.但是可以通过shiftkey、ctrlkey等属性判断在击键的同时是否按下了shift、ctrl等辅助键
Keydown、keyup
<style type="text/css">
        #img1{
            width: 25px;
            height: 25px;
            background-image: url("man.png");
            position: absolute;
            top:0;
            left:0;
        }
    </style>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
</head>
<body οnkeydοwn="move(event)">
    <div id="img1"></div>
</body>
<script language="JavaScript">
    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.top = top1+"px";
        img1.style.left = left+"px";
    }
总结：
1.top，使用变量top导致上下移动失败，原因是和window.Top这个全局变量冲突，换个变量名就好了。
2.如果把变量top1和left移入函数中，发现只能移动5px。原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都是0，不会保留上一次的值。如果需要保留，就只能用全局变量了。
3.其他事件
Onload：页面加载事件
Onfocus：获得焦点的事件
Onblur：失去焦点事件
Onchange：改变值
10.3 事件的注册
三种方法：
1.使用onxxx属性，比如οnclick=”fun()”;
2.使用js去设置元素的onxxx属性
调用addEventListener
3.通过addEventListener注册
后两种方法方法有何好处：将页面的内容、样式和行为分离，内容和样式可能是美工人员去完成，行为（实际上就是js的内容）往往是程序员的事情，分离后利于分工合作。
第三种方式addEventListener的第一个参数是事件名，第二个参数是事件处理函数。可以添加事件监听，当然也可以移除，用的是removeEventListener，参数和addEventListener参数是一样的。
而且通过addEventListener和removeEventListener甚至我们可以去动态地去注册不同的事件处理程序。
10.4 捕获与冒泡
<body>
<div id="div1">
    <p id="p1">捕获和冒泡的演示</p>
</div>
</body>
<script language="JavaScript">
    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，所以两者都会触发这个事件。
如何国定两个时间的处理顺序？这就是事件的冒泡和捕获。
冒泡：按照从内到外的顺序依次触发，默认方式。
捕获:与冒泡相反