码迷,mamicode.com
首页 > 编程语言 > 详细

javascript事件学习笔记

时间:2015-07-12 00:16:27      阅读:135      评论:0      收藏:0      [点我收藏+]

标签:

事件冒泡

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

javascript事件学习笔记

标签:

原文地址:http://www.cnblogs.com/technology-life/p/4639586.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!