react的合成事件是如何实现的呢?他们都是把事件绑定到了document,下面简单模仿一下:
<div>
<ul id="app">
<li class="childClassname">11</li>
<li class="childClassname">11</li>
</ul>
</div>
核心代码
let parentElement = document.getElementById('app')
function callback (e) {
console.log('ok', e)
}
delegate(parentElement).on('childClassname', 'click', callback);
delegate(parentElement).off('childClassname', 'click', callback);
function delegate (parentElement) {
function on (childClassname, eventType, listener) {
let list = parentElement.getElementsByClassName(childClassname)
Array.from(list, (dom) => {
let eventStore = dom.eventStore || (dom.eventStore = {})
eventStore[eventType] = listener;
})
document.addEventListener(eventType, dispatchEvent, false)
}
function dispatchEvent (event) {
let { type, target } = event
let eventType = type;
while (target) {
let { eventStore } = target;
let listener = eventStore && eventStore[eventType]
if (listener) {
listener.call(target, event)
}
target = target.parentNode;
}
}
function off (childClassname, eventType, listener) {
let list = parentElement.getElementsByClassName(childClassname)
Array.from(list, (dom) => {
let eventStore = dom.eventStore
let listener = eventStore && eventStore[eventType]
if (listener) {
eventStore[eventType] = null
}
})
}
return {on, off}
}