教材来自<<菜鸟学堂>>
JavaScript HTML DOM 事件
HTML 事件的例子：
当用户点击鼠标时 onmousedown、onmouseup、onclick
当网页已加载，关上时 onload、onunload
当图像已加载时
当鼠标移动到，移开元素上时 onmouseover、onmouseout
当元素获得焦点，失去焦点时 onfocus、onblur
当输入字段被改变时 onchange
当提交 HTML 表单时
当用户触发按键时
HTML 事件属性
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
alert("Hello World !");
}
</script>使用 HTML DOM 来分配事件
<script>
document.getElementById("myBtn").onclick=function(){
alert("Hello World !");
};
</script>addEventListener() 方法
// element.addEventListener(event, function, 冒泡(false)还是捕获(true));
<button id="myBtn">点我</button>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
alert("Hello World !");
}
document.getElementById("myBtn").addEventListener("click", function(){ alert("Hello World!"); });
</script>addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
你可以向一个元素添加多个事件句柄。
你可以向同个元素添加多个同类型的事件句柄，如：两个 "click" 事件。
你可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素。如： window 对象。
addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。
可读性更强，JavaScript 从 HTML 标记中分离开来， 在没有控制HTML标记时也可以添加事件监听。
冒泡：先注册先执行，此为默认值。
捕猎：后注册先执行。
注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"。
// 允许向同个元素添加多个事件，且不会覆盖已存在的事件：
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
// 同个元素添加不同类型的事件：
element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);removeEventListener() 方法
element.removeEventListener("mousemove", myFunction);向 Window 对象添加事件句柄
addEventListener() 方法允许你在 HTML DOM 对象添加事件监听， HTML DOM 对象如： HTML 元素, HTML 文档, window 对象。或者其他支出的事件对象如: xmlHttpRequest 对象。
// 当用户重置窗口大小时添加事件监听：
<p id="demo"></p>
<script>
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = Math.random();
});
</script>浏览器支持
注意： IE 8 及更早 IE 版本，Opera 7.0及其更早版本不支持 addEventListener() 和 removeEventListener() 方法。但是，对于这类浏览器版本可以使用 detachEvent() 方法来移除事件句柄:
element.attachEvent(event, function); element.detachEvent(event, function);
// 跨浏览器解决方法:
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 所有主流浏览器，除了 IE 8 及更早版本
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // IE 8 及更早版本
x.attachEvent("onclick", myFunction);
}