Basic learning

作者: 黑色的五叶草 | 来源:发表于2019-03-14 22:48 被阅读0次

DOM：

一、正确的事件委托

错误的写法：

ul.addEventListener('click', function (e) {
    if (e.target.tagName.toLowerCase() === 'li') {
        console.log('...');
    }
})

这么写的原因是假如想要点击的是li就执行回调，但是li里面嵌套了其他标签如span。此时就需要用while循环一直到找不到指定的节点再跳出循环。

function enTrust (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);
    });
    return element;
}