addEventListener() 方法用于向指定元素添加事件句柄，它添加的事件句柄不会覆盖已存在的事件句柄

    可以向任何 DOM 对象添加事件监听，不仅仅是 HTML 元素；可以向同个元素添加多个同类型的事件句柄

    addEventListener() 方法可以更简单的控制事件（冒泡与捕获），当你使用 addEventListener() 方法时, JavaScript 从 HTML 标记中分离开来，可读性更强， 在没有控制HTML标记时也可以添加事件监听，语法:element.addEventListener(event, function, useCapture);第一个参数是事件的类型 (如 "click" 或 "mousedown");第二个参数是事件触发后调用的函数;第三个参数是个布尔值用于描述事件是冒泡还是捕获,该参数是可选的。注意:不要使用 "on" 前缀。 例如，使用 "click" ,而不是使用 "onclick"

    向原元素添加事件句柄

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p>该实例使用 addEventListener() 方法在用户点击按钮时执行函数</p>
<button id="myBtn">点我</button>
<script>
//document.getElementById("myBtn").addEventListener("click",myFunction);
//function myFunction(){
  //alert("Hello WOrld!");
//}
//注释部分可以用以下部分替换
document.getElementById("myBtn").addEventListener("click",function(){
    alert("Hello World!");
    });
</script>
</body>
</html>

    向同一个元素中添加多个事件句柄

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
</head>
<body>
<p>实例使用 addEventListener() 方法在同一个按钮中添加多个事件</p>
<button id="myBtn">点我</button>
<p id="demo"></p>
<script>
var x=document.getElementById("myBtn");
x.addEventListener("mouseover",myFunction);
x.addEventListener("click",myFirstFunction);
x.addEventListener("click",mySecondFunction);
x.addEventListener("mouseout",myThirdFunction);
function myFunction(){
  document.getElementById("demo").innerHTML+="Moused over!<br>";
}
function myFirstFunction(){
  alert("Hello World!");
}
function mySecondFunction(){
  document.getElementById("demo").innerHTML+="Clicked!<br>";
}
function myThirdFunction(){
  document.getElementById("demo").innerHTML+="Moused out!<br>";
}
</script>
</body>
</html>

    事件传递有两种方式：冒泡与捕获——在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件；在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
div{ background-color:coral; border:1px solid; padding:50px}
</style>
</head>
<body>
<p>实例演示了在添加不同事件监听时，冒泡与捕获的不同</p>
<div id="myDiv">
  <p id="myP">点击段落，我是冒泡</p>
</div><br>
<div id="myDiv2">
  <p id="myP2">点击段落，我是捕获</p>
</div>
<script>
document.getElementById("myP").addEventListener("click",function(){
  alert("你点击了P元素！"); 
},false);
document.getElementById("myDiv").addEventListener("click",function(){
  alert("你点击了DIV元素！"); 
},false);
document.getElementById("myP2").addEventListener("click",function(){
  alert("你点击了P2元素！"); 
},true);
document.getElementById("myDiv2").addEventListener("click",function(){
  alert("你点击了DIV2元素！"); 
},true);
</script>
</body>
</html>

    removeEventListener() 方法移除由 addEventListener() 方法添加的事件句柄

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript</title>
<style>
#myDIV {
    background-color: coral;
    border: 1px solid;
    padding: 50px;
    color: white
}
</style>
</head>
<body>
<div id="myDIV">div元素添加了onmousemove事件句柄,鼠标在桔红色的框内移动时会显示随机数
  <p>点击按钮移除DIV的事件句柄</p>
  <button onClick="removeHandler()" id="myBtn">点我</button>
</div>
<p id="demo"></p>
<script>
document.getElementById("myDIV").addEventListener("mouseover",myFunction);
function myFunction(){
  document.getElementById("demo").innerHTML=Math.random();
}
function removeHandler(){
  document.getElementById("myDIV").removeEventListener("mouseover",myFunction);
}
</script>
</body>
</html>