事件處理程序太多的話摄狱,一般做法是使用事件委托蒜胖,這有利于減少內(nèi)存開銷。
原理是利用了事件冒泡茴厉。
Javascript
的事件沿著DOM樹從監(jiān)聽節(jié)點下滑到觸發(fā)節(jié)點旅掂,然后再上爬回監(jiān)聽節(jié)點赏胚。也就是說,如果你監(jiān)聽了一個DOM節(jié)點商虐,那也就等于你監(jiān)聽了其所有的后代節(jié)點觉阅,可以利用target.tagName
target.id
target.className
判斷是否是該元素崖疤,然后執(zhí)行事件即可。
<ul id="resources">
<li><a >MDN</a></li>
<li><a >HTML5 Doctor</a></li>
<li><a >HTML5 Rocks</a></li>
<li><a >Expressive Web</a></li>
<li><a >CreativeJS</a></li>
</ul>
var resources = document.querySelector('#resources'),
log = document.querySelector('#log');
resources.addEventListener('mouseover', showtarget, false);
function showtarget(ev) {
var target = ev.target;
if (target.tagName === 'A') {
log.innerHTML = 'A link, with the href:' + target.href;
}
if (target.tagName === 'LI') {
log.innerHTML = 'A list item';
}
if (target.tagName === 'UL') {
log.innerHTML = 'The list itself';
}
}