machinecat520
/
zj-Exercise


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>

        window.onload = function(){
            //点击按钮以后添加超链接
            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>