In MDN Event.target 参考有一个关于实现事件委托的示例:
事件委托示例
// Assuming there is a 'list' variable containing an instance of an
// HTML ul element.
function hide(e) {
// Unless list items are separated by a margin, e.target should be
// different than e.currentTarget
e.target.style.visibility = 'hidden';
}
list.addEventListener('click', hide, false);
// If some element (<li> element or a link within an <li> element for
// instance) is clicked, it will disappear.
// It only requires a single listener to do that
示例中不清楚的部分
我在示例中不明白的是这个评论:
// Unless list items are separated by a margin, e.target should be
// different than e.currentTarget
Question
如何保证金<li>
元素之间存在差异Event.target
and Event.currentTarget
?
记住是什么让event.target
不同于event.currentTarget
如中所述MDN Event.currentTarget 参考:
我认为重点是,如果没有边距,那么就不可能直接点击ul
自从li
元素将完全填满其空间。
如果有is一个边距,那么至少会是possible单击ul
, 在这种情况下event.target
and event.currentTarget
会是一样的。
function hide(e) {
document.querySelector("pre").textContent += 'e.target = ' + e.target.nodeName + ", e.currentTarget = " + e.currentTarget.nodeName + "\n";
}
document.querySelector("#list").addEventListener('click', hide, false);
ul {
border: 2px solid orange;
}
li {
padding: 10px;
color: blue;
margin: 30px;
border: 1px dashed blue;
}
<pre></pre>
<ul id="list">
<li>click me
<li>click me
<li>click me
</ul>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)