JavaScript中的事件委托是很重要的一个东西,事件委托依靠的就是事件冒泡和捕获的机制。
事件冒泡怎么实现,先上代码:
我们写了三个box,结构是父子关系,分别绑定了打印事件,现在我们来点击最中间的粉色box ,按图显示来看,我们点击粉色box时,其余两个box也会触碰,触犯顺序是 粉色>蓝色>黄色,这种现象就是事件冒泡了。我们再试试事件捕获,把上面代码里监听事件的第三个参数改为true,然后点击红色的box:
我们还是点击粉色box,和上一次一样,也是三个box都触发了事件,但是顺序反过来了,黄色>绿色>粉色,这种现象称为事件捕获。通过上面的例子,应该很容易就理解了事件冒泡和事件捕获,我们平时都是默认冒泡的,冒泡是一直冒到document根文档为止。
举个例子:
有三个同事预计会在周一收到快递,为了签收快递,有两种办法:1.三个人在公司门口等快递;2.委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收(可以给暂时不存在的节点也绑定上事件)。
事件委托怎么实现?
例子1:
上面的代码的意思很简单,相信很多人都是这么实现的,我们看看有多少次的dom操作,首先要找到ul,然后遍历li,然后点击li的时候,又要找一次目标的li的位置,才能执行最后的操作,每次点击都要找一次li;
这里用父级ul做事件处理,当li被点击时,由于冒泡原理,事件就会冒泡到ul上,因为ul上有点击事件,所以事件就会触发,当然,这里当点击ul的时候,也是会触发的。Event对象提供了一个属性叫target,可以返回事件的目标节点,我们成为事件源,也就是说,target就可以表示为当前的事件操作的dom,但是不是真正操作dom,当然,这个是有兼容性的,标准浏览器用ev.target,IE浏览器用event.srcElement,此时只是获取了当前节点的位置,并不知道是什么节点名称,这里我们用nodeName来获取具体是什么标签名,这个返回的是一个大写的,我们需要转成小写再做比较(习惯问题)。这样改下就只有点击li会触发事件了,且每次只执行一次dom操作,如果li数量很多的话,将大大减少dom的操作,优化的性能可想而知!
例子2:
我们有4个按钮,每个按钮都是用不同的功能,那么就要调用demo操作了
那么我们用事件委托也是可以做的,事件委托再搭配switch就可以只用一次dom操作就能完成所有的效果,比上面的性能肯定是要好一些的