JavaScript事件示例-摩杜云开发者社区

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】

常见的 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

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

JavaScript事件示例

上面的代码，是在事件属性直接写入一段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

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

JavaScript事件示例

例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

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

JavaScript事件示例

★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

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

JavaScript事件示例

以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖），也可以通过删除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

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

JavaScript事件示例

这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，经过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

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

JavaScript事件示例

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

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

进一步学习参考：

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

事件介绍 - 学习 Web 开发 | MDN (mozilla.org)

JS捕获页面按键事件 JS捕获页面按键事件_cnds123的专栏-CSDN博客