事件委托

核心思路:监听被委托人相关事件,通过当前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)

标签: none

添加新评论