【前端小记】-- JavaScript--1.事件委托

为什么用事件委托？

在元素绑定事件的时候，会出现多个元素需要绑定同一个事件的情况，这时，如果每个元素都去绑定一同一个事件就不太友好了，由此就出现了一个解决办法——事件委托。

什么是事件委托？

事件委托就是不在事件的发生地（直接 dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事件的触发，通过判断事件发生元素 DOM 的类型，来做出不同的响应。

怎么运用事件委托机制？

最经典的事件委托机制就是 ul 和 li 标签的事件监听，我们在添加事件时候，不会在 li 标签上直接添加，而是在 ul 父元素上添加，这样比较合适动态元素的绑定，新添加的子元素也会有监听函数，也可以有事件触发机制。

• 不用事件委托机制：每个li都绑定了handleClick事件。

<ul>
    <li onClich="handleClick()">1</li>
    <li onClich="handleClick()">2</li>
    <li onClich="handleClick()">3</li>
    <li onClich="handleClick()">4</li>
    <li onClich="handleClick()">5</li>
</ul>

• 用事件委托机制：给父元素ul绑定handleClick事件，页面运行时，由于事件冒泡所引起的事件委托机制，致使li也同样拥有handleClick事件。

<ul onClich="handleClick()">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>