Home >Web Front-end >JS Tutorial >How to use JS bubbling events

How to use JS bubbling events

php中世界最好的语言Original: 2017-12-04 14:43:442298browse

This time I will give you a detailed introduction to bubbling events, what they are, and how to use bubbling events. Here is a example demonstration for you to take a look at.

Bubbling event

(1) Bubbling means that when the event of a descendant element is triggered, the same event of its ancestor element will also be triggered; bubbling is upward-oriented;

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            #box1{  
                width: 300px;  
                height: 300px;  
                background-color: #00BFFF;  
            }  
            #s1{  
                background-color: yellow;  
            }  
        </style>  
           
        <script type="text/javascript">  
        window.onload=function(){  
        var box1=document.getElementById("box1");  
        var s1=document.getElementById("s1");  
        var body=document.body;  
        //冒泡就是后代元素的事件被触发的时候，其祖先元素的相同事件也会被触发；冒泡是向上导向的  
        //如果我们不需要冒泡,可以通过事件对象来取消冒泡;  
        box1.onclick=function(){    
            alert("box1");  
        }  
        s1.onclick=function(event){  
            //  
            event.cancelBubble=true;//可以通过cancelBubble  
            alert("s1");  
        }  
        body.onclick=function(){    
            alert("body");  
        }  
        };   
        </script>  
    </head>  
    <body>  
        <p id="box1">  
            我是p  
            <span id="s1">我是span</span>  
        </p>  
    </body>  
</html>

//Bubbling practice;

Delegation of events

Delegation of events: By bubbling, we can solve the problem of multiple creation of response events. The ancestor element binding of the same event is solved by bubbling, and the problem of descendant element binding event;

The target attribute of the Event event object is used to represent the triggering event object;

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title></title>  
        <style type="text/css">  
            .box1{  
                width: 400px;  
                height: 200px;  
                background-color: aquamarine;  
            }  
        </style>  
        <script type="text/javascript">  
            window.onload=function(){  
                //获取超链接  
                var ul=document.getElementById("s1");  
                var lias=document.getElementsByTagName("a");  
                var bnt01=document.getElementById("btn01");  
                //为a绑定一个事件  
//              for(var i=0;i<lias.length;i++)  
//              {  
//                  lias[i].onclick=function(){  
//                      alert("超链接");  
//                  };   
//              }  
                bnt01.onclick=function(){  
                    //创建超链接；  
                    var li=document.createElement("li");  
                    li.innerHTML="<a href=&#39;#&#39; class=&#39;sn&#39;>新建超链接</a>";  
                    ul.appendChild(li);  
                }  
                ul.onclick=function(event){   
                    //只有点击超链接的时候才执行，其他的地方不执行;  
                    if(event.target.className=="sn")  
                       alert("超链接");  
                }         
    };  
        </script>  
    </head>  
    <body>  
        <button id="btn01">创建一个超链接</button>  
        <p class="box1">  
            <ul id="s1" style="background-color:red ;">  
                <li><a href="#" class="sn">超链接一</a></li>  
                <li><a href="#" class="sn">超链接二</a></li>  
                <li><a href="#" class="sn">超链接三</a></li>  
            </ul>  
        </p>  
    </body>  
</html>

I believe you have mastered the methods after reading these cases. For more exciting information, please pay attention to other related articles on the php Chinese website!

How to use JS bubbling events

Related articles