JavaScript事件示例

川长思鸟来 2022-09-13 09:15 167阅读 0赞

### JavaScript事件示例 ###

HTML 事件(Events)是发生在 HTML 元素（也称为DOM元素）上的“事情”。换句话说，很多DOM元素可以被设计接收(或者监听) 这些事件, 并且执行代码去响应（或者处理）它们。

当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件——HTML 允许您向 HTML 元素添加事件处理JavaScript程序，通过事件及其处理程序，能够为最终用户提供更具交互性的Web体验。

为响应事件而调用的一段JavaScript代码或函数称为事件处理程序（或事件监听器）。JavaScript中事件的名字以on开头，如click事件的是onclick。

【文档对象模型 (DOM，Document Object Model)提供了对HTML文档的结构化的表述， DOM 将文档解析为一个由节点和对象（包含属性和方法的对象）组成的结构集合。简言之， DOM是web页面的完全的面向对象表述，它能够使用如 JavaScript等脚本语言进行修改。关于 DOM概述  [DOM概述 - Web API 接口参考 | MDN][DOM_ - Web API _ _ MDN]】

常见的 HTML 事件：

事件    描述

onchange    HTML 元素已被改变

onclick 用户点击了 HTML 元素

onmouseover 用户把鼠标移动到 HTML 元素上

onmouseout  用户把鼠标移开 HTML 元素

onkeydown   用户按下键盘按键

onload  浏览器已经完成页面加载

为HTML 元素（也称为DOM元素）添加事件处理程序方式

★在html中指定事件处理程序

事件名称 ="一段JavaScript代码或函数"

其中单引号也可改用单引号。

**例1**、本例中，JavaScript 代码改变了 id="demo" 的元素的内容。

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>事件示例1</title>
    </head>
    <body>
    
    <h1>JavaScript 事件</h1>
    
    <button onclick="document.getElementById('demo').innerHTML=Date()">时间是？</button>
    
    <p id="demo"></p>
    
    </body>
    </html>

【注、document.getElementById()是JavaScript获取网页标签元素的方法】

保存为：事件例1.html

用浏览器运行测试之，效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_15_color_FFFFFF_t_70_g_se_x_16][]

上面的代码，是在事件属性直接写入一段JavaScript代码，若包含多条语句，各句之间使用分号分隔或用回车分成多行，见例2。在事件属性直接写入一段JavaScript代码的方式特别是语句较多时不建议使用，更为常见是事件属性调用函数，见例3。

**例2**、在事件属性若要直接写入多条语句，各句之间使用分号分隔或用回车分成多行：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>事件示例1a</title>
    </head>
    <body>
    
    <h1>JavaScript 事件</h1>
    
    <button onclick="alert('将显示当前时间')
    document.getElementById('demo').innerHTML=Date()">
    时间是？
    </button>
    
    <p id="demo"></p>
    
    </body>
    </html>

保存为：事件例1a.html

用浏览器运行测试之，效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16][]

**例3、**使用事件属性调用函数的方式，将上面的代码改为：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>事件示例1b</title>
    </head>
    <body>
    
    <h1>JavaScript 事件</h1>
    
    <button onclick="displayDate()">时间是？</button>
    
    <p id="demo"></p>
    
    <script>
    function displayDate() {
        document.getElementById("demo").innerHTML = Date();
    }
    </script>
    
    </body>
    </html>

保存为：事件例1.html

用浏览器运行测试之，效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_15_color_FFFFFF_t_70_g_se_x_16 1][]

★DOM0级事件处理程序

这种方式被所有现代浏览器所支持。这种方式首先必须取得一个要操作的对象的引用，每个元素都有自己的事件处理程序属性，这些属性通常全都小写，例如onclick，然后将这种事件属性的值设为一个函数。

**例4**、DOM0级事件处理程序

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>事件示例1c</title>
    </head>
    <body>
    
    <h1>JavaScript 事件</h1>
    
    <button id="btn">时间是？</button>
    
    <p id="demo"></p>
    
    <script>
        // DOM0 级事件处理程序写法，注意下面两句：
        var btn = document.getElementById("btn");    
        btn.onclick = function(){
            document.getElementById("demo").innerHTML = Date()
        };
    </script>
    
    </body>
    </html>

保存为：事件例1c.html

用浏览器运行测试之，效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16 1][]

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖），也可以通过删除DOM0级方法指定的事件处理程序，只要将事件属性值设为null即可：

btn.onclick = null;

★DOM2级事件处理程序

DOM2级事件定义了两个方法，用于处理指定和删除事件处理程序的操作：方法addEventListener()和removeEventListener()。所有DOM节点中都包含这两个方法，并且它们都接受3个参数，如 ：

addEventListener("事件名" , "事件处理函数" , "布尔值");

注：事件名不含"on",如“click”， 现在的版本可以省略第三个参数，默认值为false。

最后这个参数如果是true,表示在捕获阶段调用事件处理程序；如果是fasle, 默认值，表示在冒泡阶段调用事件处理程序。

【**注**：事件（流）传播

事件流是指事件触发的顺序，事件流传播有两种方式，分别是事件冒泡（bubbling）和事件捕获（capture ）。

从外到内（事件捕获）：事件首先被最外面的元素捕获，然后在同一嵌套层次结构中依次触发目标元素的后代（子元素），直到到达最里面的 DOM 元素。

从内到外（事件冒泡）：事件首先在最内部的目标元素上触发，然后在同一嵌套层次结构中依次在目标元素的祖先（父代）上触发，直到到达最外层的 DOM 元素。】

**例5**、DOM2级事件处理程序

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>事件示例1c</title>
    </head>
    <body>
    
    <h1>JavaScript 事件</h1>
    
    <button id="btn">时间是？</button>
    
    <p id="demo"></p>
    
    <script>
        var btn = document.getElementById("btn"); 
        // DOM2级事件处理程序, 第三个参数：false表示在冒泡阶段调用事件处理程序   
        btn.addEventListener("click",function(){
            document.getElementById("demo").innerHTML = Date()
        },false);
    </script>
    
    </body>
    </html>

保存为：事件例1d.html

用浏览器运行测试之，效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16 2][]

这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，经过addEventListener添加的事件处理程序必须经过removeEventListener删除。

注意：使用addEventListener添加的匿名函数将没法删除。例如上例，为了能删除事件处理程序，使用非匿名函数，参见下例。

例6、使用addEventListener添加的非匿名函数：

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>事件示例1e</title>
    </head>
    <body>
    
    <h1>JavaScript 事件</h1>
    
    <button id="btn">时间是？</button>
    
    <p id="demo"></p>
    
    <script>
    var btn = document.getElementById("btn"); 
    //定义非匿名函数
        var handler=function(){
            document.getElementById("demo").innerHTML = Date()
        }
        //DOM2级事件处理程序 
        btn.addEventListener("click",handler,false);
        
    </script>
    
    </body>
    </html>

保存为：事件例1e.html

用浏览器运行测试之，效果如下：

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16 3][]

删除上面指定的事件处理程序

btn.removeEventListener("click",handler,false);

进一步学习参考：

[javaScript事件（二）事件处理程序 - JavaShuo][javaScript_ - JavaShuo]

[【必须掌握】js中的事件（看javascript高级编程第四版的记录）-云社区-华为云][js_javascript_-_-]

[事件参考 | MDN][_ MDN]

[DOM_ - Web API _ _ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/API/Document_Object_Model/Introduction
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_15_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/117a43e577454197918971ff141b0c0a.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/e573271b98374307851aabc49c9d1f01.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_15_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/cbbf6cad1d584b2bba00f0defba33f8f.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/0159562617b1422baed8f7150d70c571.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/54667821497a426cb25ca12446d847e9.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6L2v5Lu25byA5Y-R5oqA5pyv5a2m5Lmg5a6e6Le154ix5aW96ICF_size_14_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/83b3d59ab75045f4b5b7e9411a93aa73.png
[javaScript_ - JavaShuo]: http://www.javashuo.com/article/p-aslchnoo-h.html
[js_javascript_-_-]: https://bbs.huaweicloud.com/blogs/detail/229532
[_ MDN]: https://developer.mozilla.org/zh-CN/docs/Web/Events