有关课程里通用绑定事件的函数

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

交河故城飞

2017-08-03

老师,这里我重新整理时感觉不是很理解,想请教以下问题。

通用绑定函数在实际应用中能干什么?

这个函数编写完后,不是有使用和不使用代理两种吗,都写完后点击使用代理的函数会触发没使用代理的函数,输出4,5。是事件冒泡吗?如果是为何阻止不了,没想明白,特来请教老师。下面上代码和图


<div id="div1">

        <a href="#" id="link1">1</a>

        <a href="#" id="link2">2</a>

        <a href="#" id="link3">3</a>

        <a href="#" id="link4">4</a>

        <p id="p1">5</p>

        <p id="p2">6</p>

    </div>

    <script>

    function bindEvent(elem, type, selector, fn) {

        if (fn == null) {

            fn = selector;

            selector = null;

        }


        elem.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');

    bindEvent(div1, 'click', 'a', function(e) {

    e.preventDefault();

        // e.stopPropagation();

        // console.log(this);

        console.log(this.innerHTML);

    });

    //不使用代理

    var a = document.getElementById('p1');

    bindEvent(div1, 'click', function(e) {

        // e.stopPropagation();

        console.log(a.innerHTML);

    });

    </script>

http://szimg.mukewang.com/59826eb4000117d713550207.jpg

写回答

2回答

双越

2017-08-03

把 else { fn(e); } 去掉试试

0
1
交河故城飞
非常感谢!
2017-08-03
共1条回复

ayoualing

2017-09-05

bindEvent(div1, 'click', function(e) {

        // e.stopPropagation();

        console.log(a.innerHTML);

    });


你的事件绑定在div上当然会触发事件了

0
0

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

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

4268 学习 · 817 问题

查看课程