addEventListener()，事件监听，用于向指定的元素添加事件监听

语法：addEventListener(event,function,useCapture);

第一个参数event：指事件的类型（如’click’,‘mousedown’）
第二个参数function：事件触发后调用的函数
第三个参数useCapture：设置传递的类型，默认值为false，即冒泡传递（可省略）；值为true时，捕获传递。

例：

   

      <button id="btn">点击</button>
        <script>
            document.getElementById("btn").addEventListener("click",function () {
                console.log(Date());
            });
        </script>

(它允许给一个事件注册多个监听器，且不会覆盖已存在的事件)
例：

         

   <button id="btn">点击</button>
            <script>
                document.getElementById("btn").addEventListener("click",function () {
                    console.log("我是第一个冒泡传递");
                })
                document.getElementById("btn").addEventListener("click",function () {
                    console.log("我是第二个冒泡传递");
                })
            </script>

可以添加不同的事件类型
例：

           

 <button id="btn">点击</button>
            <script>
                document.getElementById("btn").addEventListener("click",function () {
                    console.log("我是点击的冒泡传递");
                });
                document.getElementById("btn").addEventListener("mouseover",function () {
                    console.log("我是鼠标移入的事件传递");
                });
                document.getElementById("btn").addEventListener("mouseout",function () {
                    console.log("我是鼠标移出的事件传递");
                });

                window.addEventListener("resize",function () {
                    console.log("重置窗口");
                });
            </script>

使用匿名函数传递参数
例：

            <button id="btn">点击</button>
            <script>
                document.getElementById("btn").addEventListener("click",function () {
                    console.log(def(5,8));
                });
                function def(a,b) {
                    return a*b;
                }
            </script>

removeEventListener(),用来移除事件的监听
例：

       

 <button id="btn">点击</button>
        <script>
            document.getElementById("btn").addEventListener("click",one);
            function one(){
                console.log("我是第一个冒泡传递");
            };
            //移除事件
            document.getElementById("btn").removeEventListener("click",one);
        </script>

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

在冒泡中，内部元素的事件会先被触发，然后再触发外部元素； 【从里到外】
在捕获中，外部元素的事件会被先触发，然后才会触发内部元素的事件。【从外到里】

例：

             <div id="box">
                <p id="demo">冒泡</p>
            </div>
            <br />
            <div id="div">
                <p id="px">捕获</p>
            </div>

            <script>
                document.getElementById("demo").addEventListener("click",function () {
                    console.log("p元素被点击");
                });//false可省略
                document.getElementById("box").addEventListener("click",function () {
                    console.log("div元素被点击");
                });

                document.getElementById("px").addEventListener("click",function () {
                    console.log("第二个p元素被点击");
                },true);
                document.getElementById("div").addEventListener("click",function () {
                    console.log("第二个div元素被点击");
                },true);
            </script>

浏览器的兼容性问题：在IE9之前，只能使用attachEvent

添加：attachEvent()方法
移除：detachEvent()方法

使用 attachEvent 方法有个缺点，this 的值会变成 window 对象的引用而不是触发事件的元素

addEventListener() 跨浏览器的解决方法
例：

      

  <button id="btn">点击</button>
        <script>
            var x = document.getElementById("btn");
            if (x.addEventListener){
                //大部分浏览器
                x.addEventListener("click",def);
            } else if (x.attachEvent){
                //IE8及以下浏览器
                x.attachEvent("onclick",def);
            };

            function def() {
                alert("跨浏览器的解决方法");
            };
        </script>

冒泡传递和捕获传递：

<div id="cla">
    <button id="btn">
        <p id="mp">冒泡</p>
    </button>
</div>

<br />

<div id="box">
    <button id="btn1">
        <p id="bh">捕获</p>
    </button>
</div>


<script>


    document.getElementById("cla").addEventListener("click",function(){
        console.log("div标签被点击");
    });
    document.getElementById("btn").addEventListener("click",function(){
        console.log("button标签被点击");
    });
    document.getElementById("mp").addEventListener("click",function(){
        console.log("p标签被点击");
    });


    document.getElementById("box").addEventListener("click",function () {
        console.log("div被捕获");
    },true);
    document.getElementById("btn1").addEventListener("click",function () {
        console.log("button被捕获");
    },true);
    document.getElementById("bh").addEventListener("click",function () {
        console.log("p被捕获");
    },true);

</script>