0
    <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的子元素都写上标记那肯定不对吧,太多了。这种情况怎么优化事件绑定的过程?

yepnope 203
2017-01-31 提问

查看全部 5 个回答

9

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

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

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

推广链接