今天的码农女孩做了关于事件委派和事件绑定的笔记

最新推荐文章于 2024-05-06 18:26:11 发布

丁丁丁dingdingding

最新推荐文章于 2024-05-06 18:26:11 发布

阅读量87

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/m0_64444606/article/details/123895292

版权

笔记专栏收录该内容

91 篇文章 0 订阅

订阅专栏

事件委派

只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素

事件委派将事件统一给元素的共同的祖先元素，当我们后代元素上的事件触发时会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

例：

<!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>Document</title>
    <script>
        window.onload=function(){
            var ul=document.getElementById("u1")
            //点击按钮以后添加超链接
            var btn01=document.getElementById("btn01");
            btn01.onclick=function(){
                var li=document.createElement("li")
                li.innerHTML="<a href='javascript:;' class='link'>新建的超链接</a>";
                ul.appendChild(li);
            }
            //为每一个超链接绑定一个单击响应函数
            var allA=document.getElementsByTagName("a");
            ul.onclick=function(event){
                event=event || window.event
                alert(event.target)
                //如果触发事件的对象是我们期望的元素，则执行否则不执行
                if(event.target.className=="link"){
                    alert("我是ul的单击响应函数")
                }
                
            }
        }
    </script>
</head>
<body>
    <button id="btn01">添加超链接</button>
    <ul id="u1" style="background-color: aquamarine;">
        <li><a href="javascript" class="link">超链接1</a></li>
        <li><a href="javascript" class="link">超链接2</a></li>
        <li><a href="javascript" class="link">超链接3</a></li>
    </ul>
</body>
</html>

事件绑定

使用对象.事件=函数的形式绑定响应函数，它只能同时为一个元素的一个事件绑定一个响应函数，不能绑定多个，如果绑定多个会覆盖掉前边的。

addEventListener()通过这个方法为元素绑定响应函数,可以同时为一个元素的相同事件同时绑定多个响应函数，不支持IE8及以下

参数：1.事件的字符串，不要on,2.回调函数，当事件触发时该函数会被调用，3.是否在捕获阶段触发事件，需要一个布尔值，一般传false

attachEvent()在IE8中可以实现,也可以为一个事件绑定多个响应函数，不同的是后绑定先执行，执行顺序和addEventListener()相反

参数：1.事件的字符串，要on，2.回调函数

例：

<!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>Document</title>
    <script>
        window.onload=function(){
            //点击按钮弹出一个内容
            var btn01=document.getElementById("btn01");
            btn01.onclick=function(){
                alert(1);
            }
            //addEventListener()
            btn01.addEventListener("click",function(){
                alert(1)
            },false)
            btn01.addEventListener("click",function(){
                alert(2)
            },false)
            //attachEvent()
            btn01.attachEvent("onclick",function(){
                alert(1)
            });
            btn01.attachEvent("onclick",function(){
                alert(2)
            });
            bind(btn01,"click",function(){
                alert(1)
            })
        }
        //定义一个函数，用来为指定元素绑定响应函数
        //addEventListener中的this是绑定事件的对象；attachEvent中的this是window
        //参数：obj 要绑定事件的对象;eventStr 事件的字符串(不要on);callback回调函数
        function bind(obj,eventStr,callback){
            if(obj.addEventListener){
                //大部分浏览器兼容的方式
                obj.addEventListener(eventStr,callback,false);
            }
            else{
                //IE8及以下
                obj.attachEvent("on"+eventStr,function(){
                    //在匿名函数中调用回调函数
                    callback.call(obj);
                });
            }
            
        }
    </script>
</head>
<body>
    <button id="btn01">点我一下</button>
</body>
</html>

丁丁丁dingdingding

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
今天的码农女孩做了关于事件委派和事件绑定的笔记

事件委派只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素事件委派将事件统一给元素的共同的祖先元素，当我们后代元素上的事件触发时会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件事件委派是利用了冒泡，通过委派可以减少事件绑定的次数，提高程序的性能例：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">
复制链接

扫一扫