JQuery的事件委托方法

(1).什么是事件委托?

子元素的事件委托给父元素,而不是分给子元素自己去绑定事件,然后触发事件的时候找到对应的event.target	
是指利用事件冒泡,只指定一个事件处理程序,来管理某一类型的所有事件

(2).为什么要用事件委托?

因为在js中添加到页面的事件处理程序个数会影响到页面的整体运行性能
其次对列表逐个添加事件处理程序太过于麻烦,所以,事件委托极大地提高了页面运行的性能
通过for循环给ul底下的li遍历绑定事件,看似没有问题但实际非常影响页面的运行性能
此时,就用到冒泡模式的事件委托来解决
然而,有会想到绑定给ul的事件,实现后岂不是每个li都会受影响吗?
	出此案了新概念:事件源:不管事件绑定在那个元素中,都指的是实际触发事件的内个目标
	event.target
	eg:ul.onclick=function(event){}

简单点就是  减少DOM访问,减少内存,提高页面的运行性能	

1.blind

定义和用法:主要用于给选择到的元素进行事件绑定
语法:blind("事件类型",data,function(){ });
//data是传入函数的参数用event.data获取(平时用的.click()等都是其简化用法)
特点;适用于静态页面,只能给调用它时已存在的元素绑定,不能给未来新增的元素绑定
	当页面加载完时,才进行blind;

2.live(1.7以后不支持)

定义:向当前或未来的匹配元素添加一个或多个事件处理器;

语法:live("事件类型",data, 函数名);//data可选
特点:live并没有将事件绑定到自身(this)上,而是绑定到this.context上
	正是利用了事件委托机制完成事件的监听处理,把节点的处理委托给 document
	新添加的元素不必再绑定一次监听器,可多事件处理
	只能放在直接选择的元素的后面

3.delegate
定义:将监听事件绑定到就近父级元素,因为事件可以更快的冒泡上去
语法:delegate(selector,type,[data],fn)
特点;更精确的小范围使用事件代理,性能优于.live()。可以用在动态添加的元素上。
eg: ( " 父 级 选 择 器 ′ ) . d e l e g a t e ( " . a " , " c l i c k " , f u n c t i o n ( ) ) / / 表 示 : . a 的 事 件 通 过 父 级 元 素 进 行 委 托 , ("父级选择器').delegate(".a","click",function(){}) //表示:.a的事件通过父级元素进行委托, (").delegate(".a","click",function())//.a(this)获取的是触发事件的子元素
4.on
定义;将监听事件绑定到就近父级元素
语法:on(type, 选择器,方法)
特点:给父元素底下新添加的标签也可以用监听事件
也支持多时事件处理

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值