javascript事件学习笔记

事件冒泡

并不是所有的事件都支持事件冒泡，比如submit ,focus,blur不支持事件冒泡，mouseover，mouseout虽然支持冒泡，但是一般不用，因为需要经常计算元素的位置，消耗比较大。

事件冒泡带来的优点是可以使用事件委托，提高了页面的性能，缺点是父级元素中如果也绑定了一样的事件，那么子元素事件的触发也会触发父级元素的事件，解决办法就是禁止子元素的事件冒泡。

事件委托

这是好东西，借助他可以提高页面的性能。首先，每个函数都是对象，都会占用内存，内存中的对象越多，性能越差。其次，必须事先指定所有事件程序而导致DOM的访问次数，会延迟整个页面的交互时间。

比如cick事件，我们可以把页面上所有的click事件都绑定到document元素上，然后根据event.target对象的属性（比如class，id什么的）区分，确定是来自哪个事件然后执行相应的代码。

事件委托还有一个优点，如果某些DOM是动态添加的，那么一旦添加后也会立即绑定相应的事件（如果在document元素绑定了的话），就不用再重新去绑定啦。

使用event.currentTarget == event.target可以判断是在绑定的元素自身发生的还是由子元素冒泡上来的。

jQuery中的事件绑定函数：on

关键是它的selecter参数，如果没有这个参数，直接在这个元素上触发，不管是本身触发还是子元素冒泡上来触发，当然可以在function中区分event.target实现事件委托。

如果selecter参数存在，那么为事件委托。只有在参数中选择器这一级及其后代上触发，之上的不会触发。同样可以用event.currentTarget == event.target判断是在绑定的元素自身发生的还是由子元素冒泡上来的。参数多个的话用''''括起来，而不是[]。