JavaScript 如何重复绑定问题?

Question

var audio = new Audio();

audio.onended = function(e){
    console.log('end 1');
}

audio.onended = function(e){
    console.log('end 2');
}

上面代码很只会输出end 2,要怎么才能做到能输出end 1 和 end 2?

我自己想了一种方法

bind(handler, cb){
    !m && (m = []);
    !m[handler] && (m[handler] = []);
    m[handler].push(cb);
}
    
bind('ended', function(e){
    console.log('1');
});

bind('ended', function(e){
    console.log('2');
});

var audio = new Audio();
audio.onended = (e) => {
    for (var k in m['ended']){
        m['ended'][k](e);
    }
}

大概就是这样,用数组保存,然后audio方法循环调用
但是我就感觉实现的方式不够优
希望各位不吝赐教

Answer 1

你的做法是正确的，但是如果把 bind 封装起来，再把下面的 for 封装成一个 trigger 函数就更好了。然后就有点像我在 TypeScript(JavaScript) 版俄罗斯方块 - 深入重构 中实现的 Eventable。那个思路你可以参考。

不过话说回来，Audio 是一个 HTMLDom 对象，本身应该提供了 addEventListener() 方法，可以用这个方法添加任意个处理函数。

如果你使用 jQuery，通过 jQuery 封装之后调用 on() 也可以绑定多个处理函数，比如

$(audio)
    .on("ended", function() {
        console.log(1);
    })
    .on("ended", function() {
        console.log(2);
    });

Answer 2

addEventListener 可以绑定多个事件。具体用法，自己google

Answer 3

var components = function(){

var cache = {};
return {
    set: function(type, handler){
        cache[type] = cache[type] || [];
        cache[type].push(handler);
    },
    get: function(type){
        return [].concat(cache[type] || [], cache["*"] || []);
    }
}

}
思路非常正确，我的组件就是这么写的，需要执行时用get获取然后循环执行

Answer 4

谢邀，事件的监听就是，可以重复定义的，不需要多余的操作。

//其他实现方式
obj.onclick=function(){
    console.log(1);
}
function(_obj,_event,_function){
    if(_obj[_event] == null){//判断是否有事件
        var old = _obj[_event];
        _obj[_event] = function(){
            old.call(this);
            _obj[_event]=_function;
        }
    }else{//没有的话，直接赋值
        _obj[_event] = _function
    }
}