在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML5  HTML/ [JS] 怎樣實現(xiàn)非HTML元素的事件委托?

[JS] 怎樣實現(xiàn)非HTML元素的事件委托?

打個比方:

const xhr1 = new XMLHttpRequest();
const xhr2 = new XMLHttpRequest();

通行的做法是分別給兩個xhr添加事件監(jiān)聽器,但如果事件監(jiān)聽器都相同的話,非常繁瑣而且容易出錯。

所以我想到了DOM樹上的事件委托,似乎也是用來處理這種監(jiān)聽器相同的場景的。但是對于不在DOM樹上的非HTML元素,請問應(yīng)該怎么做?

parent.addEventListener
// parent寫啥?
EventTarget.all([xhr1, xhr2]).addEventListener
// 存在類似的函數(shù)嗎?

可能這么解釋更好一點,我想要的是Promise.all的事件版,或者Observable.merge的所有事件版,或者能達(dá)成相同功能的方法或hack。請問應(yīng)該怎么做?

多謝回答。

回答
編輯回答
玄鳥

事件委托又稱事件代理, 主要處理的就是多個重復(fù)數(shù)據(jù)問題。 事件委托一般選擇給他的父元素綁定事件,然后通過event.target進(jìn)行判斷 最后給你想要的綁定類或者其他之類的

2017年2月19日 20:11
編輯回答
蝶戀花

事件委托的基礎(chǔ)是“事件冒泡機(jī)制”,只有 DOM 樹有這個機(jī)制,別的東西沒有,所以是沒有辦法委托的。

但是曲線的方案也有,就是復(fù)寫原生對象,把你的東西插進(jìn)去。但是非常不建議你這樣做,基本上修改原生對象的都沒啥好下場(會給其它庫的使用帶來兼容問題)。

當(dāng)然,你可以自己擴(kuò)展一個類出來做這些事情,那就隨便你怎么搞了。

2018年3月4日 18:41
編輯回答
逗婦乳
function myEvent() {
    this.tasks = [];
    this.on = (name, cb) => {
        this.tasks.push({ name, cb })
    }

    this.emit = (name) => {
        let ts = this.tasks.filter((t) => t.name == name)
        ts.forEach(({ cb }) => { cb(); })
    }
}

let test = new myEvent();
test.on('hhh', () => { console.log('do something') })

setTimeout(() => {
    test.emit('hhh')
}, 1000)

不知道你是不是這個意思,如果是的話隨便自己怎么寫的吧。

2017年1月15日 22:25