jquery的bind、delegate、on、one绑定事件学习记录
2016-07-25 00:00
405 查看
摘要: 其实这几个方法都用过或者用简单的例子去尝试过了,但是为了怕用到时忘记,还是凭个人理解写个总结吧。另外还有个live()绑定方法,不过jquery1.7+版本后就不支持了,所以就不做记录了。
为了对比这几种方法,我简单做了个例子
html代码如下:
js代码如下:
这段js代码的意思是点击按钮,会生成一个新的p元素,用来比较绑定事件的方法对动态生成的元素是否有效。
一:直接添加事件
这种方法简单粗暴,也就是bind()的一种简单方法,因此没给点击button生成的p元素添加到事件。
二:bind()
上面已经泄露了bind方法的一个特点,就是不能为动态生成的元素添加事件。
除了这个特点外,bind还有个弊端,就是当要给多个元素(元素集合)绑定事件时,因为相当于给每个事件都分别添加事件,所以效率很低。这种情况用on和delegate会更好。
三:on()
on方法除了可以把事件委托到document,也可以委托到目标元素的父元素;
像这个例子一样,需要为所有的p(包括点击按钮生成的p)添加元素的时候,把事件委托到document,然后在on方法的第二个参数上添加选择器,这样就相当于一次为多个元素绑定了事件,效率很快。
同时,假如只为一个元素添加事件,
on方法也可以像bind方法那样高效,就像下面这样
四:delegate()
delegate方法除了可以把事件委托到document,也可以委托到目标元素的父元素,与on方法的主要区别是参数的顺序刚好相反。
五:one()
这个比较特殊,用one绑定的事件只能执行一次,执行之后就会自动接触事件绑定;
代码如下:
总结:
尽量使用on()。。。。
为了对比这几种方法,我简单做了个例子
html代码如下:
<p>我啦啦啦啦啦啦啦</p> <p>我啦啦啦啦啦啦啦</p> <p>我啦啦啦啦啦啦啦</p> <p>我啦啦啦啦啦啦啦</p> <button id="mybtn">button</button>
js代码如下:
$("#mybtn").click(function(event){ $("<p>wolalalallalalalala</p>").insertAfter("#mybtn"); });
这段js代码的意思是点击按钮,会生成一个新的p元素,用来比较绑定事件的方法对动态生成的元素是否有效。
一:直接添加事件
$("p").click(function(event){ $(this).slideToggle(); });
这种方法简单粗暴,也就是bind()的一种简单方法,因此没给点击button生成的p元素添加到事件。
二:bind()
$("p").bind("click",function(event){ $(this).slideToggle(); }); //未来生成的元素无效,这个例子点击button后生成的p元素没绑定到事件;
上面已经泄露了bind方法的一个特点,就是不能为动态生成的元素添加事件。
除了这个特点外,bind还有个弊端,就是当要给多个元素(元素集合)绑定事件时,因为相当于给每个事件都分别添加事件,所以效率很低。这种情况用on和delegate会更好。
三:on()
$(document).on("click","p",function(event){ $(this).slideToggle(); }) //也可以为未来创建的元素绑定事件,这个例子中即点击button后添加的p元素也添加了这个事件;
on方法除了可以把事件委托到document,也可以委托到目标元素的父元素;
像这个例子一样,需要为所有的p(包括点击按钮生成的p)添加元素的时候,把事件委托到document,然后在on方法的第二个参数上添加选择器,这样就相当于一次为多个元素绑定了事件,效率很快。
同时,假如只为一个元素添加事件,
on方法也可以像bind方法那样高效,就像下面这样
$(#id).on(event,function);
四:delegate()
$(document).delegate("p","click",function(event){ $(this).slideToggle(); }); //也可以为未来创建的元素绑定事件,这个例子中即点击button后添加的p元素也添加了这个事件;
delegate方法除了可以把事件委托到document,也可以委托到目标元素的父元素,与on方法的主要区别是参数的顺序刚好相反。
五:one()
这个比较特殊,用one绑定的事件只能执行一次,执行之后就会自动接触事件绑定;
代码如下:
$("p").one("click",function(){ $(this).animate({fontSize:"+=6px"}); });
总结:
尽量使用on()。。。。
相关文章推荐
- Jquery 插件集合
- Jquery系列(三) DOM操作
- 使用ajax发送请求到WebService,需要在服务器端配置响应头和响应协议
- JQuery Each循环遍历每个元素
- jquery mobile常用的data-role类型 data-icon data-iconpos
- jquery版本变更
- jQuery的类数组对象结构(转)
- jquery之别踩白块游戏的实现
- **JQUERY** jQuery遍历
- jQuery自定义插件
- jquery on方法
- ztree jquery 树 控件
- jQuery 尺寸
- jQuery实现级联菜单<数据动态加载>
- **JQUERY** jQuery与HTML
- jQuery选择器
- **JQUERY** jQuery效果
- sitemesh+jquery制作web项目统一导航条
- jQuery总结(一)
- jQuery选择器