JavaScript事件

最新推荐文章于 2024-02-20 09:33:33 发布

H先森·

最新推荐文章于 2024-02-20 09:33:33 发布

阅读量205

点赞数 1

分类专栏：学习笔记文章标签： javascript

本文链接：https://blog.csdn.net/llp_1230/article/details/108643340

版权

学习笔记专栏收录该内容

26 篇文章 0 订阅

订阅专栏

事件

事件的概念

事件源
事件名
事件注册
事件处理
以火灾为例
XX大酒店201房间发生火灾，打119电话报警，xxx消防大队出警
赶到现场通过喷水作业成功灭火
事件源：XX大酒店201房间
事件名：火灾
事件注册：规划片区，由xxx消防大队负责
事件处理：喷水

常用事件

单击事件（onclick）

<body>
<p id="p1" onclick="fun()">单机事件</p>

</body>
<script type="text/javascript">
    function fun() {
        //获取指定元素
        var p1=document.getElementById("p1");
        p1.innerText="我被单击了";
        p1.style.fontSize="60px";
        p1.style.color="red";
        p1.style.fontFamily="楷体";
    }
</script>

在这个案例中，事件源是id为“p1”的元素，事件名是单击
事件注册οnclick=”fun()”，也就是说，当单击id为“p1”的元素时，交给fun函数来处理

双击事件(ondblclick)

<style type="text/css">
       #div1{
           width: 100px;
           height: 100px;
           background-color: skyblue;
       }
   </style>
</head>
<body>
    <div id="div1" onclick="zoomout()" ondblclick="zoomin()"></div>
</body>
<script type="text/javascript">
    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="yellow";
    }
</script>
</html>

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

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

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

<div id="div1" onmouseenter="zoomout()" onmouseleave="zoomin()"></div>

onmouseover onmouseout

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

onmousemove 鼠标移动

<style type="text/css">
        #div1{
            width: 300px;
            height: 300px;
            background-color: skyblue;
        }
    </style>
</head>
<body>
    <div id="div1" onmousemove="move(event)"></div>
    <img id="img1" src="" alt="">
    鼠标的坐标<p id="p1"></p>
</body>
<script type="text/javascript">
    function move(e) {
            var p1=document.getElementById("p1");
            var img1=document.getElementById("img1");
            p1.innerText=e.clientX+","+e.clientY;
            img1.style.top=e.clientY+"px";
            img1.style.left=e.clientX+"px";
    }
</script>

onmousewheel鼠标滚轮

<div id="div1" onmousewheel="wheel(event)"></div>
</body>
<script type="text/javascript">
    var width=100;
    var height=100;
    function wheel(e) {
        if (e.wheelDelta>0){
            width+=5;
            height+=5;
        }else {
            width-=5;
            height-=5;
        }
        var div1=document.getElementById("div1");
        div1.style.width=width+"px";
        div1.style.height=height+"px";
    }
</script>

键盘事件

键盘编码表

在这里插入图片描述

注意：键码为13的Enter，是字母键盘上的回车键
键码为108的Enter，是右方数字小键盘上的回车键（笔记本一般没有）

Keypress

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

keyCode属性，记录了按下键的编码
keypress事件只捕获可打印字符的按键，不能捕获例如shift、ctrl、alt之类
但是可以通过shiftkey、ctrlkey等属性判断在击键的同时是否按下了shift、ctrl等辅助键

keydown，keyup

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

案例：图片移动

<body onkeydown="move(event)">
<img id="img1" src="img/a.jpg" alt=""/>
</body>
<script type="text/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";
    }
</script>

总结：

（1）使用变量top导致上下移动失败，原因是和window.top这个全局变量冲突了换个变量名就好了
（2）如果把top1和left移入函数中，发现只能移动5像素，原因是函数内部的局部变量在每次调用函数时都会重新创建并初始化，也就是说每一次调用left和top1的值都是零，不会保留上一次值，如果需要保留，就只能用全局变量
其他事件：

Onload：页面加载事件
Onfocus：获得焦点的事件
Onblur：失去焦点的事件
Onchange：值改变事件

事件的注册

三种方法：

（1）	使用onxxx属性。例如onclick=“fun（）”
（2）	通过js去设置元素的onxxx属性
（3）	通过addEventListener注册

<body>
<!--第一种注册方式-->
<input type="text" id="txt1" onfocus="focus1()"/>
</body>
<script type="text/javascript">
    var txt1=document.getElementById("txt1");
    //注册事件的第二种方式
    txt1.onblur=blur2;
    //注册事件的第三种方式
    txt1.addEventListener("change",function () {
        alert("值改变了");
    });
    function focus1() {
        txt1.style.backgroundColor="blue";
    }
    function blur2() {
        var txt1=document.getElementById("txt1");
        txt1.style.backgroundColor="gray";
    }
</script>

后两种方法有什么好处：
将页面的内容、样式、行为分离，内容和样式可能是美工人员去完成
行为（也就是js内容）往往是程序员的事。分离后有利于分工合作
第三种方式addEventListener（添加事件监听）它的第一个参数事件名，第二个参数是事件处理函数。既然可以添加事件监听，那么必然会有移除事件监听，用的是removeEventListener
参数与addEventListener是一样的
而且通过addEventListener和removeEventListener我们可以动态的注册不同的事件处理程序

捕获与冒泡

<body>
    <div id="div1">
        <p id="p1">捕获与冒泡</p>
    </div>
</body>
<script type="text/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是p的父容器，所有单击段落也就相当于单击了div，所有两者都会触发这个事件
但是如何去规定两个事件的处理顺序？这就是事件的冒泡与捕获。
冒泡：按照从内到外的顺序依次触发，是默认方式
捕获：与上相反
在这里插入图片描述

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

H先森·

关注

1
点赞
踩
0

收藏

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

事件事件的概念事件源事件名事件注册事件处理以火灾为例XX大酒店201房间发生火灾，打119电话报警，xxx消防大队出警赶到现场通过喷水作业成功灭火事件源：XX大酒店201房间事件名：火灾事件注册：规划片区，由xxx消防大队负责事件处理：喷水常用事件单击事件（onclick）<body><p id="p1" onclick="fun()">单机事件</p></body><script type="text/javasc
复制链接

扫一扫