6-1 事件-知识点

6-1 事件-知识点

面试时候不要提你用jquery做过什么东西，面试官一问，它是怎么实现的，你就完蛋了。当然你要是真的看过源码，也是加分的。但是，源码那么长。

封装一个事件监听函数，怎么封装，就算不写代码，也要知道思路。

移动端兼容可以考虑，IE已经淘汰了。

如何点击p1弹出激活，点击p2-p6弹出取消？

冒泡

可以再p1上添加事件，也可以在div1上添加激活点击事件，body上也可以。在body上绑定事件，点击激活也能触发。因为有一个冒泡机制。根据DOM树，一级一级往上，先触发p上事件，在触发div上事件，再body事件。点击取消一样。

看右边代码，点击“激活”，会触发p1上事件，然后往上触发div1上的事件，div1并没有绑定事件，再往上触发body上事件。会弹出“取消”。所以右边第4行使用了一句e.stopPropatation( )阻止冒泡。

点击“取消”，p2-p6都没有取消事件，但是会往上冒泡，触发div1或者div2上的事件，这个上面也没有事件，就继续往上冒泡，触发body上的事件，弹出“取消”。

比如这种情况，a很多，你不可能每一个都绑定吧？而且未来还可能增加a标签，随时新增的标签a，你怎么绑定啊？那么时候，我们就可以再div上绑定点击事件啊。div1获取到，然后添加事件。点击每一个a标签都会冒泡到div1上。

看右边代码，在div1上添加事件，但是target能告诉你，这个点击是从哪里触发的。比如点击a1，这个div1 的click事件能走，但是target是在这个a1上触发的。后面判断，target的nodeName是不是a。这里都是a，以后添加的标签可能不是啊。 

代理的机制，通过冒泡绑定事件，通过target取得真实触发的元素。

完善通用绑定事件的函数

elem：传入的标签，比如button，a。type：比如click

如果用代理，可以把选择器传进去。就是selector，没有代理，对第三个参数做一个兼容。

分析代码：看右边，可以传入三个参数，也可以传入四个参数。三个参数无代理，四个时候有代理。左边：当传入参数，先判断第四个参数是否为空，如果为空的话，把第三个参数赋值给第四个参数，第三个参数设置为空。就是不用代理的情况。6行给elem添加监听事件，类型为type。定义一个target，8行，如果selector为空，说明是3个参数，也就是不用代理。直接执行14行，fn（e），不为空，则有代理。检测target和要代理的目标元素是否符合。符合的话，就执行11行。右边4行的this是对象a，根据左边11行，fn.call(target,e),第一个参数就是this。