一个通用的事件监听函数

最新推荐文章于 2024-06-06 12:39:07 发布

黑面狐 sa~

最新推荐文章于 2024-06-06 12:39:07 发布

阅读量663

点赞数 1

本文链接：https://blog.csdn.net/qq_21859119/article/details/77374475

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>实现一个事件代理函数</title>
</head>
<body>
    <div id="div1">
        <a href="www.baidu.com">1</a><br>
        <a href="www.baidu.com">2</a><br>
        <a href="www.baidu.com">3</a><br>
        <a href="www.baidu.com">4</a><br>
    </div>
    <a id="div2" href="www.baidu.com">div2</a>
    <script>
        function delegat(elem,event,target,fn) {
            if(fn == null){
                fn=target;
                target=null;
            }
            elem.addEventListener(event,function(e){
                if(target==null){//非代理
                    fn(e)
                }else{//代理
                    if((e.target).matches(target)){
                        fn.call(e.target,e);
                    }
                }
            })
        }
        var div1=document.getElementById("div1");
        delegat(div1,'click','a',function (e) {
            e.preventDefault();
            console.log(this.innerHTML);
        });

        var div2=document.getElementById('div2');
        delegat(div2,'click',function (e) {
            e.preventDefault();
            console.log(div2.innerHTML);
        })
    </script>
</body>
</html>