javascript - 怎么才能正确移除绑定事件？？-PHP中文网问答

javascript - 怎么才能正确移除绑定事件？？

PHP中文网 2017-04-11 12:23:49

[JavaScript讨论组]

432

PHP中文网

认证0级讲师

全部回复(4)

ringa_lee2017-04-11 12:25:49 4楼

const something = {
    bindEvent() {
        // 不管是用 function 或箭头函数封装还是 bind(this)，
        // 都会产生新的函数，需要把这个新函数保存起来，这里用 this.events 来保存，
        // 方便以后移除绑定事件
        this.events = {
            mouseenter: e => this.mouseenterHandler(e),
            mouseleave: this.mouseleaveHandler.bind(this),
            click: this.clickHandler
        };

        // Array.from 可以把伪数组变成真正的数组，
        // 当然原来的 [].forEach.call 也没有什么问题
        // 不过 dot => { ... } 是箭头函数，不需要定义 self 来保存 this
        Array.from(document.querySelectorAll(".dot"))
            .forEach(dot => {
                // 这里是三句 addEventListener，
                // 直接用 Object.keys(this.events).forEach 简写了
                Object.keys(this.events)
                    .forEach(key => dot.addEventListener(key, this.events[key]));
            });
    },

    unbindEvent() {
        // 万一没调 bindEvent，this.events 会是 undefined，所以这里处理一下。
        // 其它的和 bindEvent 中的代码差不多，就不逐一解释了
        const events = this.events || {};
        Array.from(document.querySelectorAll(".dot"))
            .forEach(dot => {
                Object.keys(events)
                    .forEach(key => dot.removeEventListener(key, events[key]));
            });
    }
};