请稍等 ...

fn含义

<!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">
        <a href="#1" id="a1">1</a>
        <a href="#2">2</a>
        <a href="#3">3</a>
    </div>
    
</body>
<script>
        function bind(ele,type,selector,fn){
            if(fn==null){
                fn=selector;
                selector=null;
            }

            ele.addEventListener(type,function(e){
                var target;
                if(selector){
                    target=e.target;
                    if(target.matches(selector)){
                        fn.call(target,e)
                    }
                }else{
                    fn(e)
                }
            })
        }

        // 代理
        var div1=document.getElementById('div1');
        var a=div1.getElementsByTagName(a)
        bind(div1,'click','a',function(e){
            e.preventDefault();
            console.log(this.innerHTML)
        })
        // 不适应代理
        // var a1=document.getElementsByTagName('a1');
        // bind(a,'click',function(e){
        //     e.preventDefault();
        //     console.log(this.innerHTML)
        // })
</script>
</html>

想知道里面的fn指的是addEventListener的第二个参数嘛

玥玥颜 2019-02-22 14:28:44

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

1001

收起