JavaScript 事件委托(利用事件冒泡)

最新推荐文章于 2023-03-19 10:00:00 发布

houyanhua1

最新推荐文章于 2023-03-19 10:00:00 发布

阅读量478

点赞数

分类专栏： JavaScript 文章标签： javascript 事件委托

本文链接：https://blog.csdn.net/houyanhua1/article/details/79594961

版权

JavaScript 专栏收录该内容

140 篇文章 4 订阅

订阅专栏

事件委托：利用事件冒泡，通过为父系元素绑定事件和event.target来筛选子级元素，从而实现为动态创建的新元素的事件绑定。

demo.html：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        li {
            height: 30px;
            line-height: 30px;
            margin: 3px 0;
            background-color: red;
            cursor: pointer;
        }
    </style>
</head>
<body>
<button>创建4个新元素li</button>
<ul>
    <li>我是原有的li</li>
    <li>我是原有的li</li>
    <li>我是原有的li</li>
    <li>我是原有的li</li>
</ul>
<script>

    var liArr = document.getElementsByTagName("li");
    var ul = document.getElementsByTagName("ul")[0];
    var btn = document.getElementsByTagName("button")[0];

    for(var i=0;i<liArr.length;i++){
        liArr[i].onclick = function () {
            alert("我是原有的li");
			//阻止事件冒泡
            event = event || window.event;
            if(event && event.stopPropagation){
                event.stopPropagation();
            }else{
                event.cancelBubble = true;
            }
        }
    }

    btn.onclick = function () {
        for(var i=1;i<=4;i++){
            var newLi = document.createElement("li");
            newLi.innerHTML = "我是新创建的li";
            ul.appendChild(newLi);
        }
    }


    //普通的事件绑定，没有办法为动态创建的新元素绑定事件。所以需要使用冒泡的特性，为新元素绑定事件(事件委托)！
    ul.onclick = function (event) {
        event = event || window.event;
        var element = event.target?event.target:event.srcElement;  //获取触发事件的最子级元素。
        //判断标签名，如果是li标签弹窗
        if(element.tagName === "LI"){
            alert("我是新创建的li");
        }
    }

</script>

</body>
</html>

houyanhua1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript 事件委托(利用事件冒泡)

事件委托：利用事件冒泡，通过为父系元素绑定事件和event.target来筛选子级元素，从而实现为动态创建的新元素的事件绑定。demo.html：&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head lang="en"&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&
复制链接

扫一扫