note

JS之事件委托

Posted by arron on November 19, 2017

前言

最近开始认真看书了。感觉之前真是愚蠢，天天焦虑不知如何进阶学习 书中自有颜如玉，书中自有黄金屋。 一切知识都在书中，只要沉下心去阅读，坦途自现。 这些感悟来自于近期阅读《JavaScript高级程序设计》，言归正传 下面是阅读笔记

事件委托

事件委托又称事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。

为何使用

一般来说，dom需要有事件处理程序，我们都会直接给它设事件处理程序就好了，那如果是很多的dom需要添加事件处理呢？比如我们有100个li，每个li都有相同的click点击事件，可能我们会用for循环的方法，来遍历所有的li，然后给它们添加事件，那这么做会存在什么影响呢？

在JavaScript中，添加到页面上的事件处理程序数量将直接关系到页面的整体运行性能，因为需要不断的与dom节点进行交互，访问dom的次数越多，引起浏览器重绘与重排的次数也就越多，就会延长整个页面的交互就绪时间，这就是为什么性能优化的主要思想之一就是减少DOM操作的原因；如果要用事件委托，就会将所有的操作放到js程序里面，与dom的操作就只需要交互一次，这样就能大大的减少与dom的交互次数，提高性能；

每个函数都是一个对象，是对象就会占用内存，对象越多，内存占用率就越大，自然性能就越差了（内存不够用，是硬伤，哈哈），比如上面的100个li，就要占用100个内存空间，如果是1000个，10000个呢，那只能说呵呵了，如果用事件委托，那么我们就可以只对它的父级（如果只有一个父级）这一个对象进行操作，这样我们就需要一个内存空间就够了，性能就会更好。

事件委托原理

事件委托是利用事件的冒泡原理来实现的，何为事件冒泡呢？就是事件从最深的节点开始，然后逐步向上传播事件，举个例子：页面上有这么一个节点树，div>ul>li>a;比如给最里面的a加一个click点击事件，那么这个事件就会一层一层的往外执行，执行顺序a>li>ul>div，有这样一个机制，那么我们给最外面的div加点击事件，那么里面的ul，li，a做点击事件的时候，都会冒泡到最外层的div上，所以都会触发，这就是事件委托，委托它们父级代为执行事件。

事件委托实现

在JavaScript里，通常要做的一件事是绑定事件，比如用户在页面的点击、滚动等，然后执行注册的回调函数，这样就响应了用户的某种行为。简单的例子如下：

$('button').on('click', function() {
    alert('hello');
});

在用户每次点击页面上的按钮时，弹出一个对话框显示‘hello’。 在有些情况下，我们期望页面上的一些元素响应用户同样的动作，举个例子。在用户点击列表的每一项时，将其内容显示在div#data-show里。

<ul id="data-list">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    …
    <li>100</li>
</ul>
<div id="data-show"></div>

可以这么做

$('#data-list li').on('click', function() {
    $('#data-show').html($(this).html());
});

其实是给列表的每一项（100个）分别绑定了点击事件。这样做的弊端在于，增加了内存，因为$(’#data-list li’)里有100个li对象。同时降低了代码性能，因为$(’#data-list li’)会搜索ul#data-list下所有的li元素。

在满足需求的情况下，如何优化呢？

答案是使用事件委托！

$('#data-list').on('click', 'li', function() {
    $('#data-show').html($(this).html());
});

将li元素的点击事件委托给其父元素ul。这么做之所以行得通，是因为事件具有冒泡的特点，当内层元素的某个事件被触发，事件会一级一级冒泡到更外层元素。当外层元素被绑定事件且被触发时，判断事件的来源即event.target是否是目标元素li，如果是就执行回调。上面的代码等价于：

function showText(text) {
    $('#data-show').html(text);
}

$('#data-list').on('click', function(event) {
    var $target = $(event.target);
    if ($target.is('li')) {
        showText($target.html());
    }
});

除了提高性能和节省内存的好处外，事件委托的另一个好处在于，页面动态变化后，不需要重新检索元素和绑定事件。上例中，如果通过AJAX向列表增加新项，新添加项仍能响应用户点击。

FEATURED TAGS
life note
FRIENDS