冒泡

最新推荐文章于 2023-01-06 11:36:53 发布

上冬二十二

最新推荐文章于 2023-01-06 11:36:53 发布

阅读量84

点赞数

本文链接：https://blog.csdn.net/qq_44941776/article/details/114460992

版权

事件的冒泡：

- 所谓的事件冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其父级元素的相同事件也会被依次触发
- 在开发中大部分冒泡都是有用的，如果不希望发生冒泡可以通过事件对象来取消冒泡
	- 使用event.cancelBubble = true;来取消冒泡事件的委派：

事件的委派：

<!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>
    <style>
        ul{
            background: rgb(162, 226, 162);
        }
    </style>
</head>
<body>
    <div>
        <button>
            添加新的标签
        </button>
        <ul>
            <li><a href="#" class="tar">我是a1</a></li>
            <li><a href="#" class="tar">我是a2</a></li>
            <li><a href="#" class="tar">我是a3</a></li>
            <li><a href="#" class="tar">我是a4</a></li>
        </ul>
    </div>
    <script>
        /*
            事件的委派
                -指将事件统一绑定给元素的共同的父级元素，这样当后代元素上的事件触发时，会一直冒泡到父级元素
                    从而通过祖先元素的响应函数来处理事件。
                -事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

        */
        window.onload = function(){
            var button = document.getElementsByTagName("button")[0];
            button.onclick = function(){
                var li = document.createElement("li");
                li.innerHTML = "<a href='#' class='tar'>我是新添加的a</a>";
                var ul = document.getElementsByTagName("ul")[0];
                ul.appendChild(li);
            }
            /*
                target
                    - event中的target表示的触发事件的对象
                    (为指定触发的元素添加class名来用target触发)
            */
            var ul = document.getElementsByTagName("ul")[0];
            ul.onclick = function(event){
                event = event||window.event;//兼容性
                if(event.target.className === "tar"){
                    alert("我是a标签的触发函数");
                }
            }
        }
    </script>
</body>
</html>

上冬二十二

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
冒泡

事件的冒泡：- 所谓的事件冒泡指的就是事件的向上传导，当后代元素上的事件被触发时，其父级元素的相同事件也会被依次触发- 在开发中大部分冒泡都是有用的，如果不希望发生冒泡可以通过事件对象来取消冒泡 - 使用event.cancelBubble = true;来取消冒泡事件的委派：事件的委派：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta h
复制链接

扫一扫