事件委托

83 阅读1分钟
    <ul id="home_outer">
        <li>
            <span>111</span>
        </li>
        <li>
            <span>222</span>
        </li>
        <li>
            <span>333</span>
        </li>
    </ul>
    let outer = document.getElementById('home_outer');
    function fn (el) {
        console.log(el);
    };
    on(outer, 'click', 'span', fn);
    function on (element, eventType, selector, fn) {
        element.addEventListener(eventType, function (e) {
            let el = e.target;
            while (!el.matches(selector)) {
                if (element === el) {
                    el = null;
                    break;
                }
                el = el.parentNode;
            }
            console.log(el, el.matches(selector));
            el && fn.call(el, e, el);
        });
        return element;
    }