2021.11.23--11.事件基础

最新推荐文章于 2024-07-22 14:27:29 发布

啊西边的瓜

最新推荐文章于 2024-07-22 14:27:29 发布

阅读量612

点赞数

分类专栏：前端学习文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/qq_41083616/article/details/121497616

版权

前端学习专栏收录该内容

45 篇文章 0 订阅

订阅专栏

11.1 事件是什么？
在JavaScript中，一个事件应该有3部分。
（1）事件主角：是按钮呢？还是div元素呢？还是其他？
（2）事件类型：是点击呢？还是移动呢？还是其他？
（3）事件过程：这个事件都发生了些什么？

JavaScript常见的事件共有以下5种。
（1）鼠标事件
（2）键盘事件
（3）表单事件
（4）编辑事件
（5）页面事件

11.2 事件调用方式

（1）在script标签中调用
在script标签中调用事件，指的是在< script >< /script >标签内部调用事件。

obj.事件名 = function()
{
    ……
};

（2）在元素中调用
在元素中调用事件，指的是直接在HTML属性中来调用事件，这个属性又叫做“事件属性”。

<html>
<head>
    <meta charset="utf-8" />
    <title></title>
    <script>
        function alertMes()
        {
            alert("绿叶学习网");
        }
    </script>
</head>
<body>
    <input type="button" onclick="alertMes()" value="弹出" />
</body>
</html>

tips: (1) 在script标签中调用事件，我们需要使用getElementById()、getElementsByTagName()等方法来获取想要的元素，然后才能对其进行事件操作。
(2) 在元素属性中调用事件，我们是不需要使用getElementById()、getElementsByTagName()等方法来获取想要的元素的，因为系统已经知道事件的主角是哪个元素了。
(3) 在实际开发中，我们更倾向于在script标签中调用事件，因为这种方式可以使得结构（HTML）与行为（JavaScript）分离，代码更具有可读性和维护性。

11.3 鼠标事件
在JavaScript中，常见的鼠标事件如下表所示。
在这里插入图片描述
(1) 鼠标单击
单击事件不只是按钮才有，任何元素我们都可以为它添加单击事件
（1.1）鼠标移入和鼠标移出
当用户将鼠标移入到某个元素上面时，就会触发onmouseover事件。如果将鼠标移出某个元素时，就会触发onmouseout事件。onmouseover和onmouseout这两个平常都是形影不离的。
（1.2）鼠标按下和鼠标松开
onmousedown表示鼠标按下的一瞬间所触发的事件，而onmouseup表示鼠标松开的一瞬间所触发的事件。当然我们都知道，只有“先按下”才能“再松开”。（与单击的区别在于：单几击过后特效一直都在，onmousedown只表示按下的一瞬间所触及的特效）

11.4 键盘事件
在JavaScript中，常用的键盘事件共有2种。onkeydown表示键盘按下一瞬间所触发的事件，而onkeyup表示键盘松开一瞬间所触发的事件。对于键盘来说，都是先有“按下”，才有“松开”，也就是onkeydown发生在onkeyup之前。
（1）键盘按下：onkeydown
（2）键盘松开：onkeyup
(可以用来实现验证输入框的内容)
几乎每一个网站的注册功能都会涉及表单验证，例如判断用户名是否已注册、密码长度是否满足、邮箱格式是否正确等。而表单验证，就肯定离不开正则表达式。其实正则表达式也是JavaScript中非常重要的内容，这个可以关注绿叶学习网的在线正则表达式教程。

键盘事件一般有两个用途：表单操作和动画控制。对于动画控制，常见于游戏开发中，例如在《英雄联盟》中控制人物行走或释放技能，就是通过键盘来控制的。用键盘事件来控制动画一般比较难，我们放到后面再介绍。

11.5 表单事件

在JavaScript中，常用的表单事件有3种。
（1）onfocus和onblur
并不是所有的HTML元素都有焦点事件，具有“获取焦点”和“失去焦点”特点的元素只有2种。
（1.1）表单元素（单选框、复选框、单行文本框、多行文本框、下拉列表）
（1.2）超链接
判断一个元素是否具有焦点很简单，我们打开一个页面后按Tab键，能够选中的就是具有焦点特性的元素。在实际开发中，焦点事件（onfocus和onblur）一般用于单行文本框和多行文本框这两个，其他地方比较少用。
（2）onselect
在JavaScript中，当我们选中“单行文本框”或“多行文本框”中的内容时，就会触发onselect事件。
（3）onchange
在JavaScript中，onchange事件常用于“具有多个选项的表单元素”。
（3.1）单选框选择某一项时触发。
（3.2）复选框选择某一项时触发。
（3.3）下拉列表选择某一项时触发。

11.6 编辑事件
(1) oncopy
在JavaScript中，我们可以使用oncopy事件来防止页面内容被复制。
(2) onselectstart
在JavaScript中，我们可以使用onselectstart事件来防止页面内容被选取。
(3) oncontextmenu
在JavaScript中，我们可以使用oncontextmenu事件来禁止鼠标右键。
总的来说，oncopy、onselectstart、oncontextmenu这3个在大多数情况下都是用来保护版权的。不过为了更好的用户体验，我们还是少用为妙，除非是迫不得已的情况。

11.7 页面事件
一、onload
在JavaScript中，onload表示文档加载完成后再执行的一个事件。
二、onbeforeunload
在JavaScript中，onbeforeunload表示离开页面之前触发的一个事件。(一般用于关闭网页时的特效)