JS事件的委托

最新推荐文章于 2024-09-11 10:49:17 发布

mmm_morning

最新推荐文章于 2024-09-11 10:49:17 发布

阅读量73

点赞数

本文链接：https://blog.csdn.net/mmm_morning/article/details/120860530

版权

关键词由CSDN通过智能技术生成

<!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>事件委托</title>
</head>
<body>
    <button id="btn1">添加超链接</button>
    <ul id="u1" style="background-color: hotpink;">
        <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 add=document.getElementById("btn1");
    var ul=document.getElementById("u1");
    add.onclick=function(){
       var add_href=document.createElement("li");
       add_href.innerHTML='<a href="javascript:;" class="link">超链接</a>';
       ul.appendChild(add_href);
    }
    //委派，实现绑定一次，应用至多个应用上
    ul.onclick=function(event){
        
        // 直接委派会导致所有父元素都可实现其功能，与期望的特定对象才能实现的预期不一致
        // 需要加判断
        // target能返回事件触发对象元素
        event=event||window.event;
        if(event.target.className=="link"){
            alert("我是ul中的li");
        };
        
    };
</script>
</html>