9.事件的委派

最新推荐文章于 2024-06-26 09:15:00 发布

理想艺术！马

最新推荐文章于 2024-06-26 09:15:00 发布

阅读量111

点赞数

本文链接：https://blog.csdn.net/mzy1711231996/article/details/120339407

版权

事件的委派
事件的委派

我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的

我们可以尝试将其绑定给元素的共同的祖先元素

     * 事件的委派
     * 	- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
     * 		从而通过祖先元素的响应函数来处理事件。
     *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

在这里插入图片描述

ABC有共同的父亲C所以当遇见需要给ABC绑定同样的事件时可以给ABC的共同父亲绑定。

            let ul = document.getElementById("ul");
            ul.onclick = function (event) {
                event = event||window.event; 
                //如果触发事件的对象是我们期望的元素，则执行否则不执行
                if(event.target.className=="link"){
                    alert("我是这个函数！");
                }
                
            }

在上述代码里面可以看到获取的是ul的元素，然后结合下面的HTML代码可以知道

<ul  id="ul">
    <li>
        <p>我是p元素</p>
        <a href="javascript:;" class="link">超链接1</a><br>
        <a href="javascript:;" class="link">超链接2</a><br>
        <a href="javascript:;" class="link">超链接3</a>
    </li>
</ul>

li是他们共同的祖先，因此把事件绑定了里。此时还有一个问题就是当你点击超链接意外的但是在li/ul以内的例如下图：
在这里插入图片描述
依然会做出反应（想要的就是只有在超链接作出反应）
解决：在超链接的标签写入一个标记 class=“link” 在事件响应的时候加上一个判断就可以解决了。

            let ul = document.getElementById("ul");
            ul.onclick = function (event) {
                event = event||window.event; 
                //如果触发事件的对象是我们期望的元素，则执行否则不执行
                if(event.target.className=="link"){
                    alert("我是这个函数！");
                }
                
            }

上面的代码段在函数里采用了餐宿event.
在event里的taget调用target在调用className与link进行对比。
然后把要执行的行为写在判断下的内容部分就可以了

整体代码部分留到以后再次复习用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        window.onload=function () {
            //添加按钮以后添加超链接
            let btn01= document.getElementById("btn01");
            //添加动作监听
            btn01.onclick = function(){
                let ul = document.getElementById("ul");
                let li = document.createElement("li");
                // let a = document.createElement("a");
                // a.href = "javascript:;";
                // let text = document.createTextNode("我是新的超链接！");
                // a.appendChild(text);
                // li.appendChild(a);
                // ul.appendChild(li);
                li.innerHTML="<a href='javascript:;' class=\"link\">我是新的超链接</a>";
                ul.appendChild(li);
            }
            
            
            let allA = document.getElementsByTagName("a");
            //遍历绑定
            // for (let i=0;i<allA.length;i++){
            //     allA[i].onclick = function () {
            //         /*
            //         * 只能为原有的添加事件
            //         * 但是新添加的却不能添加新的
            //         * */
            //     }
            // }

            /*
             * 我们希望，只绑定一次事件，即可应用到多个的元素上，即使元素是后添加的
             * 我们可以尝试将其绑定给元素的共同的祖先元素
             *
             * 事件的委派
             * 	- 指将事件统一绑定给元素的共同的祖先元素，这样当后代元素上的事件触发时，会一直冒泡到祖先元素
             * 		从而通过祖先元素的响应函数来处理事件。
             *  - 事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能
             */

        //    尝试为ul绑定一个单机响应函数
            let ul = document.getElementById("ul");
            ul.onclick = function (event) {
                event = event||window.event; 
                //如果触发事件的对象是我们期望的元素，则执行否则不执行
                if(event.target.className=="link"){
                    alert("我是这个函数！");
                }
                
            }
            
        }
        
    </script>

</head>
<body>
<button id="btn01">添加超链接</button>
<br>
<ul  id="ul">
    <li>
        <p>我是p元素</p>
        <a href="javascript:;" class="link">超链接1</a><br>
        <a href="javascript:;" class="link">超链接2</a><br>
        <a href="javascript:;" class="link">超链接3</a>
    </li>
</ul>

</body>
</html>