事件冒泡和事件捕获

一、事件冒泡：直系亲属树结构中，点击某个元素，由于冒泡作用，亲属树上的元素，凡是添加了事件的，都会被触发。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>事件冒泡和事件捕获</title>
        <style>
            
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="child" class="child">点击儿子</div>
        </div>
        <script>
            //事件冒泡
            document.getElementById("parent").addEventListener("click",function(e){
                alert("parent事件被触发。" +this.id);
            }，false)
            document.getElementById("child").addEventListener("click",function(e){
                alert("child事件被触发。" +this.id);
            },false)
        </script>
    </body>
</html>

直系亲属树结构

html

body 添加了事件

parent 添加了事件

child 添加了事件

二、事件捕获:与事件冒泡相反，从上往下

直系亲属树结构

html

body 添加了事件

parent 添加了事件

child 添加了事件

将事件冒泡中的参数false改为true，则先触发父亲事件，再触发儿子事件。

三、事件委托：原理就是事件冒泡，委托给父元素。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>事件冒泡和事件捕获</title>
        <style>
            
        </style>
    </head>
    <body>
        <div id="parent">
            <div id="child" class="child">点击儿子</div>
        </div>
        <ul id="ul">
            <li id="one">item1</li>
            <li id="two">item2</li>
            <li id="three">item3</li>
            <li id="four">item4</li>
            <li id="five">item5</li>
            <li id="six">item6</li>
        </ul>
        <script>
            // 事件委托
            // var one = document.getElementById("one");
            // one.addEventListener("click",function(){
            //     alert(1);
            // })
            // var two = document.getElementById("two");
            // two.addEventListener("click",function(){
            //     alert(2);
            // })
            // var three = document.getElementById("three");
            // three.addEventListener("click",function(){
            //     alert(3);
            // })
            // var four = document.getElementById("four");
            // four.addEventListener("click",function(){
            //     alert(4);
            // })
            // var five = document.getElementById("five");
            // five.addEventListener("click",function(){
            //     alert(5);
            // })
            // var six = document.getElementById("six");
            // six.addEventListener("click",function(){
            //     alert(6);
            // })
            //在父元素上添加事件,保证只添加一次
            var ul = document.getElementById("ul");
            ul.addEventListener("click",function(event){
                if(event.target.id == "one"){
                    alert(1)
                }else if(event.target.id == "two"){
                    alert(2)
                }else if(event.target.id == "three"){
                    alert(3)
                }else if(event.target.id == "four"){
                    alert(4)
                }else if(event.target.id == "five"){
                    alert(5)
                }else {
                    alert(6)
                }
            },false)
        </script>
    </body>
</html>

posted on 2019-10-31 08:46 觅在路途阅读(138) 评论(0) 收藏举报