事件委托
核心思路:监听被委托人相关事件,通过当前taget判断当前是否是委托人,是的就执行相关回调。
<ul>
<li class='target'>
<span>test</span>
</li>
</ul>
点击class为 target 的li可以 alert 出其所含内容(如上方代码点击弹出“test”)
在ul动态新增li元素的情况下,也要有相同效果
使用原生js实现,不使用jQuery
var ul = document.querySelector('ul');
ul.addEventListener('click', function (e) {
var target = e.target,
f = function (t) { console.log(t);
var className = t.className;
if (t.tagName === 'LI' && className && className.indexOf('target') >= 0) {
alert(t.innerHTML)
} else if(t != ul) {
f(t.parentNode)
}
};
f(target)
}, false)