jquery的bind与on和live的使用
- 使用
.bind()方法非常浪费性能因为它把同一个事件处理函数附加到了每一个匹配的元素上 - 你应该停止使用
.live()方法因为它被弃用了同时也会带来很多问题 - 使用
.delegate()方法会给你带来很多好处当你需要解决一些性能上的问题和对动态添加的元素作出处理 - 新的
.on()方法其实就是模拟.bind()，.live()和.delegate()实现的语法糖，具体取决于你如何调用它
bind绑定dom元素
bind()和unbind()提供了事件的绑定和取消机制，既可以绑定html默认支持的事件，也能够绑定自定义的事件。
$("#btnConfirm").bind('click',function(){
debugger;
var $dg = $("#dglist");
var rows = $dg.datagrid("getSelections");
var renderSelectObj = parent.renderSelector;
var _datas = [];
for(var i=0,len=rows.length; i<len; i++){
var dataItem = {};
dataItem.code = rows[i].id;
dataItem.name = rows[i].userName;
dataItem.address = rows[i].address;
dataItem.headPerson= rows[i].headPerson;
dataItem.headPersonPhone= rows[i].headPersonPhone;
dataItem.customerType= rows[i].customerType;
_datas.push(dataItem);
}
renderSelectObj.selectResultAfterCallback(_datas);
});
$("input[name='" + _keys[0] +"']").parent().parent().find("button").unbind('click').bind('click', function(){
debugger;
var action = "_self." + $(this).attr("action");
eval(action);
});
使用bind一次绑定多个事件和处理函数。
如果多个事件需要注册相同的处理函数，那么可以使用如下代码进行简化(事件名称使用空格分隔)：
$("#button1").bind("mousedown mouseup",function(){
console.log(11);
}); 如果每个事件的处理函数不同，那么可以使用如下的方式(json对象)：
$("#button1").bind(
{
"mousedown":function(){
console.log("mousedown");
},
"mouseup":function(){
console.log("mouseup");
}
}
); unbind用来取消之前通过bind绑定的事件处理函数，总的来说有三种形式：取消所有事件、取消某种类型的事件、取消某种类型下的某个事件处理函数。
$("#button1").bind("click",func1);
$("#button1").bind("click",func2);
// try to cancel function2
$("#button1").unbind("click",func2);
function func1()
{
console.log("click1");
}
function func2()
{
console.log("click2");
} $("#button1").unbind()：取消button1上所有已经绑定的事件处理函数。
$("#button1").unbind("click")：只取消button1上绑定的click类型的事件处理函数。
绑定匿名函数，点击时候执行函数体
$("#listAdd").bind("click", function() {
var gfyId=$("#gfyId").val();
if(gfyId==null||gfyId==''){
$Core.UI.message.error("请先选择用户");
return false;
}
if(flag){
$("#listAdd").gridselect({
title:'设备信息',
dialogWidth: '600', //窗口宽度 默认值600
dialogHeight: "400",//窗口高度 默认值 70%
searchFields: [ //搜索条件
{
name: "deviceName", //separator 指定后会换行显示
text: "设备名称",
type: "textbox", //控件类型 只支持 简单的表单控件 textbox my97 combobox 等简单控件 如果条件过多 可以增加 separator 换行显示
//url: "system/dic/getDicByCode/material_type", //字典获取路径
width: '', //宽度
querytype: "like",
//hidden: true, //是否隐藏域 默认否
value: '' //默认值
},
{
name: "gfy", //separator 指定后会换行显示
text: "",
type: "textbox", //控件类型 只支持 简单的表单控件 textbox my97 combobox 等简单控件 如果条件过多 可以增加 separator 换行显示
//url: "system/dic/getDicByCode/material_type", //字典获取路径
width: '', //宽度
querytype: "eq",
hidden: true, //是否隐藏域 默认否
value: $("#gfyId").val() //默认值
},
{
name: "deviceState", //separator 指定后会换行显示
text: "状态",
type: "textbox", //控件类型 只支持 简单的表单控件 textbox my97 combobox 等简单控件 如果条件过多 可以增加 separator 换行显示
//url: "system/dic/getDicByCode/material_type", //字典获取路径
width: '', //宽度
querytype: "like",
hidden: true, //是否隐藏域 默认否
value: 1 //默认值
}
],
dgOpts: { //datagrid 参数
url: 'security/deviceuser/query',
/* queryParams: {
qqq : '[{"name":"gfy","value":"'+$("#gfyId").val()+'","type":"like"}]',
d:'fff'
},*/
/*onBeforeLoad:function(paras){
paras.querystra +="&id="+$("#gfyId").val();
},*/
columns: [[
{ title: '设备名称', field: 'deviceName', align: 'center', sortable: false,formatter:function (value,row,index) {
return $Core.DicCache.get("installdevName")[value];
} },
{ title: '设备编号', field: 'deviceNumber', align: 'center', sortable: false },
{ title: '单位', field: 'company', align: 'center', sortable: false},
{ title: '数量', field: 'number', align: 'center', sortable: false },
]]
},
//选择一行时 被调用 return false 不会关掉窗口
onSelect: function (index, row) {
var materialId = row.materialId;
var isAppend = true;
$.each($("#dglist2").datagrid("getRows"), function (j,k) {
if (k.userDeviceId==userDeviceId) {
isAppend = false;
}
});
if (isAppend) {
$("#dglist2").datagrid("appendRow", row);
}
return false;},
onClear: function () { //点击清空按钮时被调用
}
});
flag = false;
}
$("#listAdd").gridselect("show");
});live方法是固定把事件都绑定在了document上，而delegate 把事件绑定了提供的父元素上
delegate减少了冒泡次数，效率会更高些
live方法将与事件处理函数关联的选择器和事件信息一起附加到文档的根级元素（即document）。通过将事件信息注册到document上，这个事件处理函数将允许所有冒泡到document的事件调用它（例如委托型、传播型事件）。一旦有一个事件冒泡到document元素上，Jquery会根据选择器或者事件的元数据来决定哪一个事件处理函数应该被调用，如果这个事件处理函数存在的话。
- 这个方法在Jquery 1.7以后的版本被弃用了，你应该在你的代码里逐步放弃使用它
- 使用
event.stopPropogation()方法将会没用，因为事件总是已经被委托到了document元素上 - 因为所有的选择器或者事件信息都被附加到document元素上了，所以一旦有一个事件要调用某个事件处理函数，Jquery会在一大堆储存的元数据中使用matchesSelector方法来决定哪一个事件处理函数将会被调用，如果这个函数有的话。
$( "#members li a" ).live( "click", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );
.delegate()方法十分强大。在上面这个例子中，与事件处理函数关联的选择器和事件信息将会被附加到( #members" )这个元素上。这样做比使用live()高效多了，因为live()方法总是将与事件处理函数关联的选择器和事件信息附加到document元素上。
- 你可以选择将选择器或者事件信息附加到指定的元素。
- 匹配操作实际上在前面并没有执行，而是用来注册到指定的元素。
- 链式操作可以得到正确的支持
- Jquery仍然需要迭代这些选择器或者事件信息来匹配元素，不过因为你可以选择哪一个元素作为根元素，所以筛选的量会大幅减少
- 因为这项技术使用了事件委托机制，它可以匹配到被动态地添加到DOM的元素
- 你可以在文档加载完之前连接事件处理函数
在Jquery 1.7版本中.bind() ， .live() 和.delegate()方法只需要使用.on()方法一种方式来调用它们。当然.unbind() ， .die() 和.undelegate()方法也一样。一下代码片段是从Jquery 1.7版本的源码中截
源码
bind: function( types, data, fn ) {
return this.on( types, null, data, fn );
},
unbind: function( types, fn ) {
return this.off( types, null, fn );
},
live: function( types, data, fn ) {
jQuery( this.context ).on( types, this.selector, data, fn );
return this;
},
die: function( types, fn ) {
jQuery( this.context ).off( types, this.selector || "**", fn );
return this;
},
delegate: function( selector, types, data, fn ) {
return this.on( types, selector, data, fn );
},
undelegate: function( selector, types, fn ) {
return arguments.length == 1 ?
this.off( selector, "**" ) :
this.off( types, selector, fn );
}如何使用.on()方法决定了它如何调用其他方法。你可以认为.on()方法被具有不同签名的方法”重载“了，而这些方法实现了不同的事件绑定的连接方式。
/* Jquery的 .bind() , .live() 和 .delegate() 方法只需要使用`.on()`方法一种方式来调用它们 */
// Bind
$( "#members li a" ).on( "click", function( e ) {} );
$( "#members li a" ).bind( "click", function( e ) {} );
// Live
$( document ).on( "click", "#members li a", function( e ) {} );
$( "#members li a" ).live( "click", function( e ) {} );
// Delegate
$( "#members" ).on( "click", "li a", function( e ) {} );
$( "#members" ).delegate( "li a", "click", function( e ) {} );有三个A标签,点击其中一个后添加on样式
<a href="javascript:void(0);" onclick="open('a');return false;" class="off">a</a>
<a href="javascript:void(0);" onclick="open('b');return false;" class="off">b</a>
<a href="javascript:void(0);" onclick="open('c');return false;" class="off">c</a>
$("a").parent().on("click", "a", function() {
$(this).addClass("on").siblings("a").removeClass("on");
});