js事件委托

Question

<ul>         <li data-index='1'>1</li>         <li data-index='2'>2</li>         <li data-index='3'>3</li>     </ul>上面这样可以把事件绑定在ul上，通过dataset来判断点击的是哪个li，来触发不同的动作下面这种<ul>     <li data-index='1'>         <p>             <span>1</span>         </p>         <img/>     </li>     <li data-index='2'>         <p>             <span>2</span>         </p>         <img/>     </li>     <li data-index='3'>         <p>             <span>3</span>         </p>         <img/>     </li></ul>li 内有多个子元素，点击 li 必然可能会点到子元素，如果子元素上不写dataset等标记，如何判断点了哪个li？ 如果给li的子元素都写上标记那肯定不对吧，太多了。这种情况怎么优化事件绑定的过程？

Answer 1

事件被触发的时候，事件对象event有两个很关键属性Event.target和Event.currentTarget。 
它们俩的主要区别就在于，currentTarget该属性总是指向被绑定事件的元素，而target则是指向触发该事件的元素。

举个例子，你把这个事件绑定在了最上级的<ul>标签中，然后你现在点击了下属某个<span>标签。 
之后就是事件冒泡，冒泡至<ul>标签时，回调被触发，此时Event.currentTarget指向的是当前<ul>的DOM对象，而Event.target则是指向你点击的那个<span>的DOM对象。

所以在事件委托的处理中，只要在回调中对Event.target进行分析，就能知道触发事件的元素是不是你需要的了。