<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<p>该实例使用 addEventListener() 方法来向按钮添加点击事件。</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", function()
{
document.getElementById("demo").innerHTML = "Hello World";
});
</script>
</body>
</html>
HTML DOM addEventListener() 方法
为 <button> 元素添加点击事件。 当用户点击按钮时，在 id="demo" 的 <p> 元素上输出 "Hello World" :
事件类型
事件类型整体来说可以分为三大类：
1）鼠标类
click 点击
mousedown 按下
mouseup 松开
mouseenter 划进
mouseleave 划出
mouseover 划进
mouseout 划出
mousemove 移动
上面两个划进划出，区别在于是否对子元素有影响，具体可以去百度查一查用法的差异
2）键盘类
keydown 按下（按所有键都会触发）
keypress 按下（按字符集触发）
keyup 松开
两者设计的初衷就不同。
keypress 就是用来检测用户输了啥字符的，而 keydown 则是单纯的检测用户是否按了键盘上的按键，所以 keypress 常用。
两者事件对象上的 keyCode 值也不同。
keyCode是一个代码，与键盘上的一个键对应。在 keypress 事件中，这个 keyCode 还与 ASCII码对应，比如keyCode 等于 105 ，就是按了 i。
最后说下，判断一个前端专业不专业，就问下他开发界面的时候有没有考虑过键盘事件。
3）UI类
load 加载
unload 重载
resize 改变浏览器尺寸
scroll 使用滚动条
addEventListener()方法将事件处理程序附加到指定的元素。
addEventListener()方法将事件处理程序附加到元素，而不覆盖现有的事件处理程序。
您可以向一个元素添加许多事件处理程序。您可以向一个元素添加许多相同类型的事件处理程序，即两个“单击”事件。
您可以将事件侦听器添加到任何DOM对象，而不仅仅是HTML元素。即window对象。
addEventListener()方法可以更容易地控制事件对冒泡的反应。
使用addEventListener()方法时，JavaScript与HTML标记分离，以提高可读性，
并允许您添加事件侦听器，即使您不控制HTML标记也是如此。
您可以使用removeEventListener()方法轻松删除事件侦听器。
语法：element.addEventListener(event, function, useCapture);
- 第一个参数是事件的类型（如“ click”或“ mousedown”）。
- 第二个参数是我们想要在事件发生时调用的函数。
- 第三个参数是一个布尔值，指定是使用事件冒泡还是事件捕获。此参数是可选的。
请注意，您不要为事件使用“on”前缀; 用“ click”而不是“ onclick”。
document.getElementById("myBtn").addEventListener("click", displayDate);
向元素添加事件处理程序
当用户点击某个元素时提醒“Hello World！” ：
element.addEventListener("click", function(){ alert("Hello World!"); });
您还可以在外部定义函数，然后把函数名当参数传：
element.addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
将许多事件处理程序添加到同一元素
addEventListener()方法允许您向同一元素添加许多事件，而不会覆盖现有事件
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseover", myFunction);
element.addEventListener("mouseout", myThirdFunction);
将事件处理程序添加到window对象
addEventListener()方法允许您在任何HTML DOM对象上添加事件侦听器，例如HTML元素，HTML文档，window对象或支持事件的其他对象，
如xmlHttpRequest对象。
添加在用户调整窗口大小时触发的事件侦听器：
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});
传递参数值时，使用“匿名函数”，使用以下参数调用指定的函数：
element.addEventListener("click", function(){ myFunction(p1, p2); });
事件冒泡或事件捕获？
HTML DOM中有两种事件传播方式，即冒泡和捕获。
事件传播是一种在事件发生时定义元素顺序的方法。
如果<div>元素中有<p>元素，并且用户单击<p>元素，应该首先处理哪个元素的“click”事件？
在冒泡中，首先处理内部元素的事件，然后处理外部：首先处理<p>元素的click事件，然后处理<div>元素的click事件。
在捕获最外层元素时，首先处理事件然后处理内部：首先处理<div>元素的click事件，然后处理<p>元素的click事件。
使用addEventListener()方法，您可以使用“useCapture”参数指定传播类型：
默认值为false，将使用冒泡传播，当值设置为true时，事件使用捕获传播。
document.getElementById("myP").addEventListener("click", myFunction, true);
document.getElementById("myDiv").addEventListener("click", myFunction, true);
removeEventListener()方法
element.removeEventListener("mousemove", myFunction);
注：该addEventListener()和removeEventListener()方法并不在IE 8和更早版本的支持。
但是，对于这些特定的浏览器版本，您可以使用attachEvent()方法将事件处理程序附加到元素，以及detachEvent()删除它的方法，解决方案
var x = document.getElementById("myBtn");
if (x.addEventListener) { // 对于所有主流浏览器，IE 8及更早版本除外
x.addEventListener("click", myFunction);
} else if (x.attachEvent) { // 适用于IE 8及更早版本
x.attachEvent("onclick", myFunction);
}