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

Question

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

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

这个函数编写完后，不是有使用和不使用代理两种吗，都写完后点击使用代理的函数会触发没使用代理的函数，输出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>

Answer 1

双越 2017-08-03 12:19:28

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

• 提问者 交河故城飞 #1

  非常感谢！

Answer 2

ayoualing 2017-09-05 18:16:26

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

        // e.stopPropagation();

        console.log(a.innerHTML);

    });

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