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代码，若包含多条语句，各句之间使用分号分隔或用回车分成多行，见例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
用浏览器运行测试之，效果如下：
例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
用浏览器运行测试之，效果如下：
★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
用浏览器运行测试之，效果如下：
以这种方式添加的事件处理程序会在事件流的冒泡阶段被处理。而且，只能为同一个元素的同一个事件设定一个处理程序（覆盖），也可以通过删除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
用浏览器运行测试之，效果如下：
这种方式可以为同一个元素的同一个事件添加多个处理函数。还可删除事件处理函数，经过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
用浏览器运行测试之，效果如下：
删除上面指定的事件处理程序
btn.removeEventListener("click",handler,false);
