请稍等 ...

老师,这是代码...

<!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 11:15:04

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

816

收起

提交取消

6回答

双越 2019-02-22 22:14:42

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

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

提问者沧海的雨季 #1
```
好的,我再开一个
```
回复有任何疑惑可以回复我~ 2019-02-22 22:15:32

双越 2019-02-22 18:12:40

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

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

提问者沧海的雨季 #1
```
老师,我又写了写,你看一下
```
回复有任何疑惑可以回复我~ 2019-02-22 18:13:52

提问者沧海的雨季 2019-02-22 16:52: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>

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

提问者沧海的雨季 #1
```
老师,这样写可以吗?能够再简化吗?
```
回复有任何疑惑可以回复我~ 2019-02-22 16:52:51

提问者沧海的雨季 2019-02-22 15:23:19

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

fn.call(ele,e)

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

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

提问者沧海的雨季 #1

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

回复有任何疑惑可以回复我~ 2019-02-22 16:58:14

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

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

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

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

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

玥玥颜 #1

不使用代理的那个方法你写错了吧，获取a标签的方法tagName那个就错了。
另外this只有在执行的时候才能明确指向谁，bind函数是在全局作用域下执行的，所以应该是指向顶层window吧，我理解是这样的，等老师回复

回复有任何疑惑可以回复我~ 2019-02-22 14:51:08

提问者沧海的雨季回复玥玥颜 #2

如果a1用id绑定然后触发也是window啊,这里代码确实有问题...用id绑定触发应该指向a1吧

回复有任何疑惑可以回复我~ 2019-02-22 14:56:17

玥玥颜回复提问者沧海的雨季 #3
```
老师的源代码里好像这个不是this.innerHTML,是a.innerHTML
```
回复有任何疑惑可以回复我~ 2019-02-22 15:08:19

点开查看后面1条评论

玥玥颜 2019-02-22 14:09:07

我试了一下能打印出来啊

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

提问者沧海的雨季 #1
```
你用的是什么浏览器?
```
回复有任何疑惑可以回复我~ 2019-02-22 14:25:26
玥玥颜回复提问者沧海的雨季 #2
```
chrome
```
回复有任何疑惑可以回复我~ 2019-02-22 14:29:01
提问者沧海的雨季回复玥玥颜 #3
```
哪个版本?
```
回复有任何疑惑可以回复我~ 2019-02-22 14:36:30

点开查看后面2条评论

相似问题

老师，您好。代码可以先上传一部分吗

跟着老师的代码敲，到引入这个recommend的js就报这样的bug了

下载的项目代码与老师讲的不符合，并且不能运行

你这段代码是不是错的？

老师为什么照着敲完代码之后一直显示在加载中

登录后可查看更多问答，登录/注册

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

参与学习 4268 人
解答问题 817 个

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

了解课程

本课精华内容

问答

老师,这是代码...

817 19

关于实参与形参同名

795 17

做海康还是同花顺的笔试时候，遇到拆解url了。

919 11

就业请教

927 10

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

869 10

查看更多本课问答

意见反馈帮助中心 APP下载