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

一、事件流#

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>

js

 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）
        }

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