请稍等 ...

老师,这个是又写的代码...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>事件代理通用</title>
</head>
<body>
    <div id="div1">
        wooooooooooooooooooooooo
        <a href="#1" id="a1">1</a>
        <a href="#2">2</a>
        <a href="#3">3</a>
    </div>
    
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
        function bind(ele,type,selector,fn){
            if(fn==null){
                fn=selector;
                selector=null;
            }

            // 传入元素只有一个
            if(ele.length==null){
                ele.addEventListener(type,function(e){
                    var target;
                    // 代理
                    if(selector){
                        target=e.target;
                            if(target.matches(selector)){
                            fn.call(target,e)
                        }
                        // 非代理
                    }else{
                        fn.call(ele,e)
                    }
                })
            }else{
                // 传入为一个集合
                for(let i=0;i<ele.length;i++){
                    ele[i].addEventListener(type,function(e){
                        // 代理
                        if(selector){
                            let target=ele[i].target;
                            if(target.matches(selector[i])){
                                fn.call(target[i],e)
                            }
                        // 非代理
                        }else{
                            console.log(this)
                            fn.call(ele[i],e)
                        }
                    })
                }
            }
        }

        // 代理
        var div1=document.getElementById('div1');
        var a=div1.getElementsByTagName('a');

        // var a=document.getElementById('a1')
        // bind(div1,'click','a',function(e){
        //     e.preventDefault();
        //     console.log(this)
        // })

        // 非代理
        bind(a,'click',function(e){
            e.preventDefault();
            console.log(this)
        })

</script>
</html>

沧海的雨季 2019-02-22 22:16:39

源自：19-2 事件-代码演示

764

收起

提交取消

2回答

双越 2019-02-23 13:50:20

函数中的 this 是否指向 window ，具体可以去讲解 this 的那一节学习，有其他方式可以改变 this 的值，如使用 call apply。
代码我没看出什么 bug ，如果运行正常那就 OK
chrome 是最符合 w3c 标准的浏览器，不可能会阻止默认事件。如果想验证这一问题，可专门做一个简单的 demo （能验证默认事件即可，越简单越好），来验证一下。

0 回复有任何疑惑可以回复我~

收起回答

提问者沧海的雨季 #1

老师,这里还是有bug,就是事件代理无法阻止默认事件的问题,我测试了谷歌是可以阻止默认事件,但是这个代理中确实不行,火狐可以...不知道是为啥了

回复有任何疑惑可以回复我~ 2019-02-23 14:21:25

提问者沧海的雨季 2019-02-22 22:20:32

问题是

函数调用this永远指定的是window吗?必须在函数里改变this指向才可以的么..这个this函数中不改变指向的话如果在函数内打印是显示他自身的,在函数调用的时候不改变this指向是window...
这样写的话有什么bug么?还能够简化么..我试了下没啥问题...
版本 72.0.3626.119（正式版本）（64 位）的chrome 无法阻止默认事件,欧朋,火狐就可以阻止,现在chrome已经不支持阻止默认事件了么..

0 回复有任何疑惑可以回复我~

收起回答