00:00
Hello,大家好,接下来的话呢,我们来准备封装一个函数,用来绑定元素的事件。在开始呢,写这个效果之前呢,我们首先先来复习一个知识点,就是关于盗墓的事件流。盗墓事件流呢,主要是包括三个方面啊,三个阶段。第一个呢,是补货阶段。第二个呢,是元素的触发阶段。第三个呢,是冒泡阶段。总共呢是三个。那么什么意思呢?比方说呢,我们点击了一下这个input,举个例子。那点击完这个input之后呢,首先它会先进入补货阶段的时间出发。会呢,去触发由外向内这些元素当中的。补货阶段的click事件处理程序。当这个阶段执行完成之后呢,然后去执行元素身上的那个实验处理程序。等元素的事件处理程序执行完毕之后。
01:01
他开始呢,进入冒泡阶段。冒泡阶段是执行这个元素。所有先辈元素当中。冒泡阶段的单机事件。应该说是同类型事件。就是整个事件流啊,它的一个。啊,执行的特点。好,那下面的话我们用代码来演示一下。我呢,在这儿准备了一个小的一个案例啊,大家可以看,这是个同心圆。现在我为元素的去绑定世界。啊,绑定什么时间呢?给咱们绑定这个单机时间。先的。给外层去绑定A。然后click。发个。然后呢,我输出一个内容,Can log,然后补货。这是alter。OK。然后呢,这个事件呢,它默认是冒泡阶段的事件。
02:02
什么意思呢?就是每一个元素。大家看这,我们可以为其绑定两种阶段的同类型事件。也就是说,我既可以为他绑定补货基的click。还可以为他保护,还可以为他绑定冒泡阶段的click时间处理程序。好,我们来给大家演示一下。那么当前的话,我们需要往里边传递第三个参数。第三个它就是是是否为捕获啊,设置为处呢,就是为元素添加捕获阶段的事件。好,然后呢,我再给这个加上。然后里边咱们写一个inner。搞定。下面我们来看看事件触发的一个顺序。点开它刷新页面,然后点击。点完之后你会发现它是先触发外层的alter。这个事件,然后再触触发内层的这个补货的。
03:00
把这个事件。是由外而向内的。然后呢,接下来我们再去绑定两个世界。啊,这次的话咱们改了啊,不用这个触了。变成冒泡阶段的。冒泡。然后click和这个下边这个是外层的,下边这个是内层的,当然这两个先后顺序没有没有影响。好切过来,然后呢,刷新页面。然后我点击。大家可以看一下,触发的时候呢,是先触发外层的补货的click事件处理程序。再触发内层的补货的click事件处理程序。然后呢,再触发是内层的啊,冒泡阶段的click事件处理程序。然后再去执行外层的。啊,这个元素它的捕获阶段的,可以个事件处理程序。这就是咱们对事件流呢做了这样一个回顾。
04:02
为什么要回顾这个呢?因为我们借料封装的这个事件啊,它有一个特点就是事件委托。什么是事件委托呢?就是我们并没有把事件绑定在目标元素身上。比方说啊,我们以当前这个图来给大家说明,我们要给鹰扑的绑定事件。我们呢,不直接给他绑。往谁身上绑呢?我们往它负极元素身上去绑。那为什么要往它负极元素身上去绑呢?这样做有一个好处,就是我们呢可以减少内存占用。假如说你这边input的好多啊,这里边儿有好几个。如果说你要让每一个都有事件,你得绑定三次。但是如果说我们把它绑定到外层,我们只需要绑定一次。但大家大家可能会想说,诶,我这样绑的话,效果还能出现吗?当然可以啊,其原理就是因为事件会冒泡。
05:01
啊,当你去点击这些元素的时候。比如说这里边儿啊A。B。C3个元素,当你去点击这三个元素的时候。他们本身身上没有绑事件啊,所以说他会往,当然他就接下来的话会往上冒泡。冒到负极元素身上,然后去执行处理程序。啊,这是这个,那这是一个好处优点啊,那么第二个就是我们动态添加元素这个事件它也好使。比方说啊,通过盗墓操作,往这又加了一个D元素。啊,按照常规思想来做的话,我们还要单独为其去绑定一个事件。但是如果用事件冒泡的话啊,用事件委托的话,这个我们不需要为他单独去绑定。因为呢,它的负极元素还在啊,只要你点它啊,就会冒泡冒到负极元素,然后去执行。啊,这个效果还是能够出现的。就是事件委托它的一个好处。
06:00
好了,那关于这个前置知识的一些准备,我们就先到这儿。
我来说两句