事件冒泡
并不是所有的事件都支持事件冒泡,比如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判断是在绑定的元素自身发生的还是由子元素冒泡上来的。参数多个的话用‘‘‘‘括起来,而不是[]。
时间: 2024-10-21 08:27:25