其他分享
首页 > 其他分享> > 第10章 事件

第10章 事件

作者：互联网

10.1 事件驱动程序设计

在 JavaScript 中，最为重要的一件事就是对事件进行处理。与通常的 GUI 应用程序相同，Web 应用程序也是通过事件驱动程序设计的方式来实现其功能的。在事件驱动程序设计中，需要注册不同事件的处理方式。

在注册了事件的处理方式之后，浏览器就会在该事件发生时执行所注册的处理方式。所登录的处理方式被称作事件处理程序、事件句柄或事件侦听器。

对于 Web 应用来说，有下面这些代表性的事件：点击某个元素、将鼠标移动至某个元素上方、按下键盘上某个键，等等。此外，读取页面或跳转至其他页面等行为也会引发事件。根据这些不同的用户操作，浏览器会触发相应的事件。之后，执行事件处理程序，处理被触发的事件。

所以说，JavaScript 程序设计的基本内容之一就是获取需要对事件进行捕捉的元素，并针对该元素注册相应的事件处理程序。

DOM Level 2 中定义了标准的事件模型。大部分现代浏览器都是根据这一标准实现的。但是，在Internet Explorer 8 以及更早版本中，采用了自定义的事件模型实现方式。从功能上来说，这确实和标准事件模型没有太大的差别，但 API 是完全不同的，应当加以注意。

10.2 事件处理程序/事件侦听器的设定

对事件的处理方式被称为事件处理程序或事件侦听器，但这两者之间其实是有区别的。它们的设定方法并不相同，因此，两者支持的处理元素数量也不同。对于 1 个元素或事件，只能设定 1 个事件处理程序。而与之相对的，可以为其同时设定多个事件侦听器。

下面是一些对事件处理进行设定的方式。

  • 指定为 HTML 元素的属性（事件处理程序）
  • 指定为 DOM 元素的属性（事件处理程序）
  • 通过 EventTarget.addEventListener() 进行值定（事件侦听器）

10.2.1 指定为 HTML 元素的属性

将事件处理程序指定为 HTML 元素的属性是一种最为简单的设定事件处理程序的方式。在下面的例子中，将会在发生按钮点击事件时显示含有 “黄子涵是帅哥！” 和 “黄子涵是靓仔！” 消息的提示对话框。

<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>指定为 HTML 元素的属性</title>
</head>

<body>
    <input id="hzh" type="button" value="黄子涵" onclick="console.log('黄子涵是帅哥！');
    console.log('黄子涵是靓仔！')">
</body>

</html>

image

在这个例子中，通过字符串对 onclick 事件处理程序将要执行的 JavaScript 代码进行了设定。如果代码包含多行，则可以通过分号分隔。当然，事先另外定义一个函数之后再执行该函数的方式也不会有问题。

这种方式的优点在于，设定步骤非常简单，并且能够确保事件处理程序会在载入时被设定。而如果使用之后所介绍的一些方法则可能会产生一些问题。即元素在被载入时，其事件处理程序可能还没有被注册，这时用户执行任何本应触发事件的操作，也不会有任何效果。与之相对地，将事件处理程序指定为 HTML 元素的属性的话，就能够确保它在载入的同时被设定。

在书写上也有一些需要注意的地方，就是这里的 onclick 全都是以小写字母书写的。HTML 不会区分大小写字母，所以即使在这里使用了 onClick 也不会有什么差别。但是，XHTML 则会区分大小写字母。考虑到这点，最好还是使用全部小写的 onclick，这样将有助于提高代码的兼容性。

表 10.1 事件处理程序
事件处理程序名 触发的时机
onclick 鼠标点击操作
ondblclick 鼠标双击操作
onmousedown 按下了鼠标按键
onmouseup 放开了鼠标按键
onmousemove 鼠标指针在元素上方移动
onmouseout 鼠标指针从元素上方离开
onmouseover 鼠标指针移动至了元素上方
onkeydown 按下了键盘按键
onkeypress 按过了键盘按键
onkeyup 放开了键盘按键
onchange 更改了input 元素的内容
onblur input 元素失去了焦点
onfocus input 元素获得了焦点
onselect 文本被选取
onsubmit 按下了表单的提交按钮
onreset 按下了表单的重置按钮
onload 载入完成
onunload 文档的载入被撤销（例如页面跳转等情况时）
onabort 图像的读取被中断
onerror 图像读取过程中发生错误
onresize 窗口尺寸发生改变

如果事件处理程序返回了一个 false 值，则会取消该事件的默认行为。例如，当onsubmit 事件处理程序返回了一个 false 时，表单的内容将不会被发送。这在使用 onsubmit 事件处理程序验证表单内容时会很有用，可以在发现内容有误时返回 false
以取消表单数据的发送。

代码清单 10.1 在事件处理程序中返回false
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在事件处理程序中返回false</title>
</head>

<body>
    <a id="hzh" href="www.huangzihan.top" onclick="return stop();">黄子涵</a>

    <script>
        function stop(event) {
            console.log("黄子涵是帅哥！");
            return false;
        }
    </script>
</body>

</html>

image

10.2.2　指定为 DOM 元素的属性

如果一个页面分别使用了 HTML 文件和 JavaScript文件，则应该尽可能少地在 HTML 文件中使用
JavaScript 代码，以提高可维护性。因此，最好将事件处理程序的设定全都写在 JavaScript 内。事件处理程序可以被指定为节点的属性（代码清单10.2）。

代码清单 10.2　将事件处理程序指定为属性
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>将事件处理程序指定为属性</title>
</head>

<body>
    <button id="huangzihan">黄子涵</button>

    <script>
        var huangzihan = document.getElementById('huangzihan');
        function hzh() {
            console.log("黄子涵");
        }
        huangzihan.onclick = hzh;
    </script>
</body>

</html>

image

需要注意的是，这里被指定为事件处理程序的正是一个函数。像下面这样，以函数执行后的返回值或
用于 HTML 标签的字符串的形式来设定的话，将会发生错误。

代码清单 10.3　事件处理程序的设定
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件处理程序的设定</title>
</head>

<body>
    <button id="hzh1">hzh1</button>
    <button id="hzh2">hzh2</button>
    <button id="hzh3">hzh3</button>

    <script>
        var hzh1 = document.getElementById('hzh1');
        var hzh2 = document.getElementById('hzh2');
        var hzh3 = document.getElementById('hzh3');
        function huangzihan() {
            console.log("黄子涵");
        }
        hzh1.onclick = huangzihan();   // 这种方式指定的是函数执行后的返回值，是错误的
        hzh2.onclick = "huangzihan()"; // 以字符串的形式指定该函数也是无效的
        hzh3.onclick = huangzihan;     // 将函数指定为了事件处理程序，而能够正常运行
    </script>
</body>

</html>

image

与通过 HTML 标签的属性设定时不同，这里必须全部使用小写字母书写。

而在设定为了属性之后，HTML 标签属性中的内容将会被覆写。因此，如果希望通过 JavaScript 代码
在 HTML 标签属性所指定的内容之后再追加新的处理操作，仅采用这种指定 DOM 元素的方法是很难实现的。在 DOM Level 2 Events 中定义的一种方法可以简单地解决这一问题。

10.2.3　通过 EventTarget.addEventListener() 进行指定

注册事件侦听器

虽然之前所介绍的各种方式也能够对事件注册各种各样的处理，但它们都有一个缺点，那就是对于某一个元素的某一个事件，只能够指定 1 种处理操作。

如果只能够指定 1 种处理操作的话，就很难处理复杂的行为。为了弥补这一缺点，在 DOM Level 2 中定义了 EventTarget.addEventListener() 方法（代码清单 10.4）。不过正如前面所说，该方法无法在 Internet Explorer 8 以及更早版本的浏览器中使用。为此可以在 Internet Explorer 中换用 attachEvent() 方法。

代码清单 10.4　注册事件侦听器
<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>注册事件侦听器</title>
</head>

<body>
    <button id="hzh1">hzh1</button>

    <script>
        var hzh1 = document.getElementById('hzh1');
        hzh1.addEventListener('click', function(e) {
            console.log("黄子涵");
        }, false);
    </script>
</body>

</html>

image

在注册事件侦听器时，还可以指定第 3 个参数，用以指定从捕获阶段还是从事件冒泡阶段开始执行。在 DOM Level 2 中，这一参数是必须的。而在 DOM Level 3 中，如果省略了该参数，则会默认从事件冒泡阶
段开始执行。之前介绍的指定为 HTML 元素属性的方式，以及指定为 DOM 元素属性的方式，都会在事件冒泡阶段执行事件处理程序。如果希望在捕获阶段执行事件处理程序的话，则只能使用EventTarget.addEventListener() 方法了。而在 Internet Explorer 所使用的 attachEvent() 方法中，是没有与之相对应的参数的。在 Internet Explorer 中，事件侦听器总是会在事件冒泡阶段被执行。

事件侦听器的执行顺序
代码清单 10.5　对同一个事件侦听器进行注册
代码清单 10.6　事件侦听器的执行顺序
事件侦听器对象
代码清单 10.7　将对象注册为事件侦听器

10.2.4　事件处理程序 / 事件侦听器内的 this 引用

10.3 事件的触发

10.4 事件的传播

10.5 事件所具有的元素

10.6 标准事件

10.7 自定义事件

标签：10,元素,指定,侦听器,HTML,处理程序,事件
来源： https://www.cnblogs.com/Huang-zihan/p/16221324.html