JS .addEventListener( ) 给元素添加新事件（事件监听器）

什么是事件监听：

当同一个对象使用.onclick的写法触发多个方法的时候，后一个方法会把前一个方法覆盖掉，也就是说，在对象的onclick事件发生时，只会执行最后绑定的方法。而用事件监听则不会有覆盖的现象，每个绑定的事件都会被执行。

用 .addEventListener( ) 可以为元素绑定多个事件，而且每个事件都可以被执行，实现事件监听。

语法：

Element.addEventListener(event, function, useCapture)

event: 第一个参数是事件的类型 (如 "click" 或 "mousedown").

function: 第二个参数是事件触发后调用的函数。

useCapture: 第三个参数是个布尔值用于描述事件是冒泡还是捕获。该参数是可选的。

[code]<p>该实例使用 addEventListener() 方法在按钮中添加点击事件。 </p>
<button id="myBtn">点我</button>

<script>
document.getElementById("myBtn").addEventListener("click", function(){
alert("Hello World!");
});
</script>

向一个元素添加多个事件

[code]var x = document.getElementById("myBtn");
x.addEventListener("click", myFunction);
x.addEventListener("click", someOtherFunction);

function myFunction() {
alert ("Hello World!")
}
function someOtherFunction() {
alert ("函数已执行!")
}

向同一个元素中添加多个事件句柄（不同事件类型）

[code]element.addEventListener("mouseover", myFunction);
element.addEventListener("click", mySecondFunction);
element.addEventListener("mouseout", myThirdFunction);

 向 Window 对象添加事件句柄

[code]window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});

事件冒泡或事件捕获？

事件传递有两种方式：冒泡与捕获。

事件传递定义了元素事件触发的顺序。 如果你将 <p> 元素插入到 <div> 元素中，用户点击 <p> 元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即： <p> 元素的点击事件先触发，然后会触发 <div> 元素的点击事件。（ 由内而外）

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即： <div> 元素的点击事件先触发 ，然后再触发 <p> 元素的点击事件。（由外而内）

addEventListener() 方法可以指定 "useCapture" 参数来设置传递类型：

addEventListener(event, function, useCapture);

useCapture 参数：默认值为 false, 即冒泡传递，当值为 true 时, 事件使用捕获传递。

更多 slibings 用法和事件冒泡与捕获：点击： 彻底弄懂JS的事件冒泡和事件捕获