事件委托

做什么？

事件委托的出现主要是解决监听事件的频繁。 比如， 有一个ul下面有20个li标签， 这个时候你需要监听这个20个li标签，那么直接监听的话肯定是很low的， 而且如果我们进行li标签的删除再添加这种效果， 那么新出现的li标签就没有监听事件咯。 事件委托的机制是利用了冒泡机制， 目前浏览器对触发事件都是：捕获-->向上冒泡， 所以懂了吧？ 最开始我还以及委托是一个黑科技， 毕竟删除了元素后再添加也会有触发事件， 不过仔细一想就觉得原来如此。 但如果大家去不用jquery的delegate类似的方法去实现事件委托， 那么肯定会失败呢？ 那么这是为什么呢？ 这是因为事件委托是由 监听事件特性 + 指定上下文 来完成的， 是比dom层api更高一级实现的特性。看到这里懂了吧

简陋实现

<html>
<head>
    <title></title>
</head>
<body>
    <div id="event">11
        <li>li</li>
        <a>href</a>
    </div>
<script type="text/javascript">
    window.onload = function () {
        document.getElementById('event').addEventListener('click', function (event) {
            if (event.target.nodeName.toLowerCase() == 'li') {
                console.log('li标签事件');
            }
        });
    };
</script>
</body>
</html>

 



posted @ 2017-02-27 16:54  igal  Views(145)  Comments(0)  Edit  收藏  举报