<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script type="text/javascript">
            
            window.onload = function(){
                
                var u1 = document.getElementById("u1");
                
                //点击按钮以后添加超链接
                var btn01 = document.getElementById("btn01");
                btn01.onclick = function(){
                    //创建一个li
                    var li = document.createElement("li");
                    li.innerHTML = "<a href='javascript:;' class='link'>新建的超链接</a>";
                    
                    //将li添加到ul中
                    u1.appendChild(li);
                };
                
                
                /*
                 * 为每一个超链接都绑定一个单击响应函数
                 * 这里我们为每一个超链接都绑定了一个单击响应函数，这种操作比较麻烦，
                 *     而且这些操作只能为已有的超链接设置事件，而新添加的超链接必须重新绑定
                 */
                //获取所有的a
                var allA = document.getElementsByTagName("a");
                //遍历
                /*for(var i=0 ; i<allA.length ; i++){
                    allA[i].onclick = function(){
                        alert("我是a的单击响应函数！！！");
                    };
                }*/
                
                /*
                 * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
                 * 我们可以尝试将其绑定给元素的共同的祖先元素
                 * 
                 * 事件的委派
                 *     - 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
                 *         从而通过祖先元素的响应函数来处理事件。
                 *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
                 */
                
                //为ul绑定一个单击响应函数
                u1.onclick = function(event){
                    event = event || window.event;
                    
                    /*
                     * target
                     *     - event中的target表示的触发事件的对象
                     */
                    //alert(event.target);
                    
                    
                    //如果触发事件的对象是我们期望的元素，则执行否则不执行
                    if(event.target.className == "link"){
                        alert("我是ul的单击响应函数");
                    }
                    
                };
                
            };
            
        </script>
    </head>
    <body>
        <button id="btn01">添加超链接</button>
        
        <ul id="u1" style="background-color: #bfa;">
            <li>
                <p>我是p元素</p>
            </li>
            <li><a href="javascript:;" class="link">超链接一</a></li>
            <li><a href="javascript:;" class="link">超链接二</a></li>
            <li><a href="javascript:;" class="link">超链接三</a></li>
        </ul>
        
    </body>
</html>

简化

            window.onload = function(){
                document.querySelector("#box1").onclick = function(event){
                    event = event || window.event;
                    if(event.target.className == "Link"){
                        alert("事件委派");
                    }
                }
                
                document.querySelector("button").onclick = function(){
                    // document.querySelector("#box1").innerHTML += "<li><a href='javascript:void(0);'>新添加的</a></li>";
                    var li = document.createElement("li");
                    li.innerHTML = "<a href='javascript:void(0);' class='Link'>新添加的</a>";
                    document.querySelector("#box1").appendChild(li);
                    
                }
            }

posted on 2021-09-05 20:27 leiyanting 阅读(97) 评论(0) 收藏举报

刷新页面返回顶部

导航