事件委托
version 1
<ul id="ul">
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
</ul>;
ul.addEventListener('click', (event) => {
if (event.target.nodeName.toLowerCase() === 'li') {
console.log(event.target.innerHTML);
}
});
version 2
<ul id="ul2">
<li>
<span>1</span>
</li>
<li>
<span>2</span>
</li>
<li>
<span>3</span>
</li>
</ul>;
function delegate(element, eventType, selector, fn) {
element.addEventListener(eventType, (e) => {
let el = e.target;
while (!el.matches(selector)) {
if (element === el) {
el = null;
break;
}
el = el.parentNode;
}
el && fn.call(el, e, el);
});
}
delegate(ul2, 'click', 'li', (event, el) => {
console.log(event.target.innerHTML);
});