简单讲一下我理解的事件委托

这几天参加面试，被面试官问到了这个问题。
这个问题是js比较基础的内容，在此自己专门做个笔记记录一下，顺便跟小伙伴们分享一下。

一、什么是事件委托？

事件委托也叫做事件代理，元素的事件委托给它的父元素或者外层元素。
通俗点说：就是通过父元素给子元素绑定事件。

它是如何实现的呢？点击子元素，冒泡到父元素上，触发父元素的点击事件。
事件委托的原理，是事件冒泡。

二、什么是事件冒泡？

让我们写个demo测试一下，点击最内侧元素，输出

// threeClick
// twoClick
// oneClick

<div class="father" onclick="oneClick()">
    <div class="secendFather" onclick="twoClick()">
        <div class="last" onclick="threeClick()">点我冒泡</div>
    </div>
</div>

<script>
    function oneClick() {
        console.log('oneClick');
    }

    function twoClick() {
        console.log('twoClick');
    }
    
    function threeClick(event) {
        console.log('threeClick');
    }
</script>

虽然只点击了子元素，但是子元素在外侧元素的内部，他会冒泡到外侧元素上，执行外侧元素的点击事件。

三、如何解决事件冒泡？

如何阻止她的冒泡事件呢？很简单，运用 stopPropagation 就可以了。

<div class="father" onclick="oneClick()">
    <div class="secendFather" onclick="twoClick()">
        <div class="last" onclick="threeClick()">点我冒泡</div>
    </div>
</div>

    function oneClick() {
        console.log('oneClick');
    }

    function twoClick() {
        console.log('twoClick');
    }

    function threeClick() {
        let e = event || window.event;
        e.stopPropagation();
    }

四、事件委托的优点

1. 动态添加元素，无需另外为元素添加事件，使开发便捷。
2. 在内存中只开辟了一块空间存储元素事件，节约资源，提高性能。

五、事件委托的应用

原生写法

<input type="button" onclick="addLi()" value="新增按钮">
<ul id="ul">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

<script>
    document.querySelector('ul').addEventListener('click', function () {
        console.log('我被点击了');
    });

    function addLi() {
        let li = '<li>新增的li</li>';
        $('#ul').append(li);
    }
</script>

jquery写法

    $('ul').on('click', 'li', function () {
        console.log('我是li');
    })

有问题可以给我留言，如果对你有了帮助，顺手点个赞，谢谢。