master

分支 (1)

管理

管理

master

js_study
/
事件的委派.html

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <button id="btn01">添加超链接</button>
    <ul id="u1">
        <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>
<script>
    var btn01 = document.getElementById("btn01");
    btn01.onclick = function(){
        var u1 = document.getElementById("u1");
        // 创建一个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){
        // 如果触发事件的对象是我们期望的元素，则执行，否则不执行
        if(event.target.className == "link"){
            alert("我是ul的单击响应函数!");
        }
    }

</script>

</html>