js原生事件委托的实现

原生js事件委托实现

html界面

<ul id="example">
    <li>
        111
        <span>
            <input type="text" value="测试">
            aaaaaaa
        </span>
    </li>
    <li>222</li>
</ul>

js的逻辑实现

document.querySelector('#example').addEventListener('click', function (e) {
        console.log(this.querySelector('li').contains(e.target));
        var tDOM = e.target;
        while (tDOM) {
            if(tDOM.matches('li')){
                console.log('委托元素的事件处理');
                break;
            }else {
                if(tDOM === this || tDOM.parentNode === this) {
                    break;
                }else {
                    tDOM = tDOM.parentNode;
                }
            }
        }
    }, false);