JS .addEventListener( ) 事件监听器：监听元素的事件，并设置事件发生时触发的函数，以及事件流（冒泡、捕获）

为什么使用事件监听？

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

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

语法：

Element.addEventListener(event, function, useCapture)

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

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

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

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

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

向一个元素添加多个事件

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

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

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

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

---

 向 Window 对象添加事件句柄

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 时, 事件使用捕获传递。

JS 默认事件流为 事件冒泡（从内到外）：

例子说明：

给爷爷元素、父元素、子元素都设置了点击事件。点击子元素时，3个点击事件都被触发。

触发顺序为：子元素 => 父元素 => 爷爷元素

从内到外，为事件冒泡机制

例子一、

<div id="app">
    <div class="outer" onclick="outer()">最外层
        <div class="middle" onclick="middle()">中间
            <div class="inner"  onclick="inner()">最内层点击我(^_^)</div>
        </div>
    </div>
    <p></p>
</div>
<script type="text/javascript">

function inner(){
                console.log( '触发了inner 事件'+"  target:"+event.target.className)
            }

function middle() {
                console.log( '触发了middle事件'+"  target:"+event.target.className)
            }

function outer() {
                console.log( '触发了outer事件'+"   target:"+event.target.className)
            }

</script>

例子二、只给最外的元素添加事件。因为事件冒泡机制，内部元素的事件会一层层往外传递

<div id="app">
    <div class="outer" onclick="outer()">最外层
        <div class="middle">中间
            <div class="inner" >最内层点击我(^_^)</div>
        </div>
    </div>
    <p></p>
</div>
<script type="text/javascript">

function outer() {
                console.log( '触发了事件的目标元素是'+"   target:"+event.target.className)
            }

</script>

---

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