老师,这是代码...

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

沧海的雨季

2019-02-22

<!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>

写回答

6回答

双越

2019-02-22

已采纳

新开个问题吧，这个问题的答复、回复都太乱了

沧海的雨季

好的,我再开一个

2019-02-22

共1条回复

双越

2019-02-22

有可能是 a 标签的问题。你把代码中的 a 标签，都换成 p 标签，再试一下。

沧海的雨季

老师,我又写了写,你看一下

2019-02-22

共1条回复

沧海的雨季

提问者

2019-02-22

<!DOCTYPE html>

<head>

<title>事件代理通用</title>

</head>

<body>

wooooooooooooooooooooooo

</div>

</body>

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

共1条回复

沧海的雨季

提问者

2019-02-22

老师,不使用代理是不是要加一句

fn.call(ele,e)

因为函数是this是指向window,所以调用的时候this也是window,只有改变指向才能让触发的事件绑定在它本身上面吧

沧海的雨季

老师,这个在函数里打印和调用函数打印是不一样的,这调用得时候为什么this变了?每个函数调用都会这样么?

2019-02-22

共1条回复

沧海的雨季

提问者

2019-02-22

老师,chrome现在不能用preventDefault()阻止默认事件了吗?现在是用什么来代替呢?

还有为什么我写的在不代理情况下,this指向window呢?不应该指向触发事件的元素吗?哪里写错了呢..

这个事件函数是不能用一个集合去绑定事件的吧,如何能写出像jq一样集合也能触发的事件呢?

沧海的雨季

玥玥颜

但是你不用这个封装的函数,用原生来写,this指向触发的事件的啊,事件的话this都是指向触发的元素啊

2019-02-22

共4条回复

玥玥颜

2019-02-22

我试了一下能打印出来啊

橙序猿哥哥

沧海的雨季

我想说我的火狐也能打印出来，哈哈哈，老铁

2019-05-08

共5条回复

BAT大牛带你横扫初级前端JavaScript面试（第二版）

BAT高级前端工程师亲授，结合真实面试题，提高面试成功几率

4268 学习 · 817 问题

查看课程

相似问题

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

回答 2

老师你验证代码用的是什么东西

回答 1

老师，为什么这段代码执行完以后f1是undefined？

回答 3

老师，我总是不能把代码传到coding上去，您能看看怎么回事吗？

回答 4

跟老师代码一模一样f.printName()打印出来就是空的不知道怎么回事。试了N次了。

回答 3

打开慕课网App查看更多内容