For循环与委派

一、介绍！

在网页设计中，我们常常会在同一个模块下，放置多个图片，并给与其点击事件。但一个一个的设置点击事件，这实在是太麻烦了！不仅代码冗杂、繁琐，而且会导致页面加载、运行等方面变慢。因此，代码一般越简洁越好，能批量操作的就批量操作。而面对这种情况，我们一般用以下两种方法处理。

二、For循环！

  为了解决类似问题，我们希望代码可以自主识别被点击的代码，然后执行对应的功能，于是便有了For循环。

这种方法可以为一个区域下某一类标签同时添加一个事件，如：

为某一个<div>标签下所有的<span>标签添加点击事件。

该方法会从第一个<span>标签开始判断，是哪一个<span>标签被点击了，然后执行下面的点击事件

这样，代码就少了很多，而且运行速度也不会变慢！

三、委派！

   但For循环也并不完美，他也有一个缺陷，

    

像这种后面通过动态添加的事件，无法添加点击事件！为了解决这个问题，委派方法应运而生！

我们希望只绑定一次事件，即可应用到多个元素上，即使元素是后添加的，我们可以尝试将其绑定给元素的共同的祖先元素

原理：事件的委派

- 指将事件统一绑定给元素共同的祖先元素，这样当后代元素上的事件触发时，层层上传，会一直冒泡到祖先元素，从而通过祖先元素的响应函数来处理事件

- 事件委派是利用冒泡，通过委派可以减少事件绑定的次数，提高程序的性能

//事件对象的属性target：返回触发此事件的元素(事件的目标节点)

    

这样，即使是后面通过动态添加的事件，只要和之前的事件在同一父元素下，那么也可以和前面的事件一样触发点击事件。

四、使用

    关于这两种用法，一般如果确定后面不会添加新的事件了，那么我们一般都用For循环，因为其简单且不易出错，但如果不确定是否还会添加新事件，那么我们就用委派，委派比较稳妥，不会因为后面新添加的事件，而重新添加代码。