一、事件流

1.事件流

描述的是在页面中接受事件的顺序

2.事件冒泡

由最具体的元素接收，然后逐级向上传播至最不具体的元素的节点

（最具体 –> 最不具体）

3.事件捕获

最不具体的节点先接收事件，而最具体的节点应该是最后接收事件

（最不具体 –> 最具体）

2.事件处理

1.HTML事件处理

直接添加到HTML结构中

2.DOM0级事件处理

把一个函数赋值给一个事件处理程序属性

<button id="btn">按钮</button>

    <script type="text/javascript">

        document.getElementById("btn").onclick = function () {

            alert("DOM0级事件处理1");//多个事件会被覆盖掉

        }

        document.getElementById("btn").onclick = function () {

            alert("DOM0级事件处理2");

        }

    </script>

3.DOM2级事件处理

addEventListener(“事件名”,”“事件处理函数”,“布尔值”)

当前版本，一般布尔值都不操作。

true：事件捕获

false：事件冒泡

removeEventListener();

<button id="btn">按钮</button>

    <button id="btn2">DOM2级按钮</button>

    <script type="text/javascript">

        //document.getElementById("btn").onclick = function () {

        //    alert("DOM0级事件处理1");//多个事件会被覆盖掉

        //}

        //document.getElementById("btn").onclick = function () {

        //    alert("DOM0级事件处理2");

        //}

        var btn2 = document.getElementById("btn2");

        btn2.addEventListener("click", function () {

            alert("DOM2级事件处理1");

        })

        btn2.addEventListener("click", demo1);

        btn2.addEventListener("click", demo2);

        function demo1() {

            alert("DOM2级事件处理2");

        }

        function demo2() {

            alert("DOM2级事件处理3");

        }

        //移除

        //btn2.removeEventListener("click", demo2);

    </script>

4.IE事件处理程序

attachEvent

detachEvent

3.事件对象

事件对象event

1).type：获取事件类型

2).target：获取事件目标

<div id="div1">

    <button id="btn1">按钮</button>

        </div>

    <script type="text/javascript">

        var btn1 = document.getElementById("btn1");

        var div1 = document.getElementById("div1");

        btn1.addEventListener("click", showType);

        div1.addEventListener("click", showDiv);

        function showType(event) {

            document.write(event.type+"<br>");

            document.write(event.target + "<br>");

}

        function showDiv(event) {

            alert("div");

        }

    </script>

3).stopPropagation()：阻止事件冒泡

没有调用showDiv，冒泡被取消了。

function showType(event) {

            document.write(event.type+"<br>");

            document.write(event.target + "<br>");

            //组织事件冒泡

            event.stopPropagation();

        }

4).preventDefault()：组织事件默认行为

（1）

<a id="aid" href="http://www.baidu.com">百度</a>

 document.getElementById("aid").addEventListener("click", showaid);

        function showaid() {

            alert(1);

        }

（2）在showaid方法里面，添加

e.stopPropagation();//阻止事件冒泡

（3）阻止默认行为

function showaid(e) {

            alert(1);

            e.stopPropagation();//阻止事件冒泡

            e.preventDefault();//阻止默认行为（这里是跳转baidu）

        }

----->------>

巴特西

javascript - 事件详解（阻止事件冒泡+阻止事件行为）