JavaScript各种事件总结

最新推荐文章于 2022-06-29 15:51:06 发布

奥申

最新推荐文章于 2022-06-29 15:51:06 发布

阅读量707

点赞数

分类专栏： JavaScript 文章标签： javascript js

本文链接：https://blog.csdn.net/qq_44890539/article/details/105496934

版权

JavaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

事件的概述

什么是事件：在网页中不同的元素在操作过程中会激活一些不同操作。如：鼠标单击，按下键盘，失去焦点等。我们可以针对这些操作进行代码的编写。

设置事件的两种方式：

方式一：命名函数

<input type="button" value="点我试试" onclick="事件处理函数()">

方式二：匿名函数

元素对象.onclick = function () {
 事件处理的代码
}

事件名	作用
onclick	单击事件
ondblclick	双击事件
onload	加载完毕
onfocus	得到焦点
onblur	失去焦点
onchange	改变事件
onmouseover	鼠标移上
onmouseout	鼠标移出
onsubmit	表单提交事件

1 加载完成事件

onload 元素加载完毕以后调用的事件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>栅格系统</title>
    <script type="text/javascript">
        //事件处理函数
        function clickMe() {
            alert("啦啦啦");
        }
        //整个网页加载完毕之后调用代码
        window.onload = function () {
            //得到按钮 2
            document.getElementById("b2").onclick = function () {
                alert("哈哈哈");
            }
        }
    </script>
</head>
<body>

<input type="button" value="点我试试 1" onclick="clickMe()">
<input type="button" value="点我试试 2" id="b2">

</body>
</html>

2 鼠标点击

onclick 单击事件
ondblclick 双击事件

在这里插入图片描述

姓名：<input type="text" id="t1"><br>
姓名：<input type="text" id="t2"><br>
<input type="button" value="单击复制/双击清除" id="b1">
<script type="text/javascript">
//得到按钮对象
 document.getElementById("b1").onclick = function () {
 //复制文本的内容
 document.getElementById("t2").value = document.getElementById("t1").value;
 }
 //双击清除
 document.getElementById("b1").ondblclick = function () {
 //将两个 value 设置为空串
 document.getElementById("t1").value = "";
 document.getElementById("t2").value = "";
 }
</script>

3 鼠标移动

onmouseover 鼠标移到元素上面
onmouseout 鼠标移出事件

示例：将鼠标移动到 img 上显示图片，移出则显示另一张图片

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>鼠标移动</title>
</head>
<body>
<img src="img/1.jpg" id="pic" width="500">
<script type="text/javascript">
    //得到图片对象，鼠标移入事件
    document.getElementById("pic").onmouseover = function () {
        //document.getElementById("pic").src = "img/1.jpg";
        this.src = "img/2.jpg"; //当前对象
    }
    //鼠标移出事件
    document.getElementById("pic").onmouseout = function () {
        document.getElementById("pic").src = "img/1.jpg";
    }
</script>

</body>
</html>

4 this 关键字的作用

出现在控件的事件方法中，做为对象传递进来

<input type="button" value="点我试试 1" onclick="clickMe(this)">
//事件处理函数
function clickMe(obj) {
 //obj 相当于按钮
 alert(obj.value); }

出现在匿名函数的代码中：

//得到图片对象，鼠标移入事件
document.getElementById("pic").onmouseover = function () {
 //document.getElementById("pic").src = "img/1.jpg";
 this.src = "img/1.jpg"; //当前对象
}

5 焦点相关

什么是焦点：如果某个元素得到了光标，处于一种可以马上操作的状态，称为得到焦点。光标离开，称为失去焦点。
onblur：失去焦点
onfocus: 得到焦点

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="t1"><span style="color: red" id="info"></span>
<script type="text/javascript">
    //得到文本框，设置得到焦点的事件
    document.getElementById("t1").onfocus = function () {
        //修改标签内部的 html 内容
        document.getElementById("info").innerHTML = "我是文本框";
    }

    //失去焦点
    document.getElementById("t1").onblur = function () {
        document.getElementById("info").innerHTML = ""; //将 span 中的内容清空
    }
</script>

</body>
</html>

6 改变事件

onchange 文本框或下拉列表内容发生改的事件。文本框失去焦点以后才会激活改变事件。下拉列表当选择不同的选项激活这个事件

示例：

选中不同的城市，出现一个信息框显示选中城市的值
用户输入英文字母以后，文本框的字母全部变成大写

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
城市：
<select id="city">
    <option value="广州">广州</option>
    <option value="深圳">深圳</option>
    <option value="东莞">东莞</option>
</select>
<hr>
姓名：<input type="text" id="t1">
<script type="text/javascript">
    //城市的改变事件
    document.getElementById("city").onchange = function () {
        alert(this.value);
    }
    //文本框改变事件
    document.getElementById("t1").onchange = function () {
        //将自己的值赋值给自己
        this.value = this.value.toUpperCase();
    }
</script>
</body>
</html>

奥申

关注

0
点赞
踩
7

收藏

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

事件的概述什么是事件：在网页中不同的元素在操作过程中会激活一些不同操作。如：鼠标单击，按下键盘，失去焦点等。我们可以针对这些操作进行代码的编写。设置事件的两种方式：方式一：命名函数<input type="button" value="点我试试" onclick="事件处理函数()">方式二：匿名函数元素对象.onclick = function () { ...
复制链接

扫一扫