$(document).off(
"click"
,
"#test"
).on(
"click"
,
"#test"
,
function
(){
})
添加click事件(触发)
$btnSub.on('click',function(){})
移除on
$btnSub.off();
on、off、one
jQuery1.7 以后推出了.on()和.off()方法,替代之前的方法。on/off整合了bind、unbind、事件委托等方法
on替代bind方法
on可以替代bind方法,使用方法和bind一致
// 绑定单个事件
$(":button").on("click",function(){
alert("on");
});
// 传递数据
$(":button").on("click",{name:"tom"},function(e){
alert(e.data.name);
});
// 绑定多个事件
$(":button").on("mouseover mouseout",function(e){
alert("移入移出");
});
// 使用对象绑定多个事件
$(":button").on({
mouseover:function(){
alert("移入");
},
mouseout:function(){
alert("移出");
}
});
// 阻止冒泡和默认行为
$(":submit").on("click",function(e){
e.preventDefault();
e.stopPropagation();
alert("取消默认行为和冒泡");
});
off替代unbind方法
off可以替代unbind方法,使用方法不变
function test(){
alert("test");
}
$(":button").on("click.on",test); //根据函数解除绑定
$(":button").off("click"); // 根据事件解除绑定
$(":button").off("click.on"); // 根据命名空间解除绑定
事件委托
实际上是给祖先绑定一个事件。子元素通过冒泡将事传递到祖先元素,祖先元素再判断点击的是不是button,如果是,就执行相同的事件。因此,当有很多个相同的按钮需要绑定相同的事件时,可以用事件委托将事件委托给祖先节点,有祖先节点判断子节点是否执行某事件。如果不适用事假委托,那个每一个节点都需要绑定一个事件。
使用方法是:
祖先节点.on(“事件”,”子元素”,”绑定的函数”);
on的第二个参数需要写成所有相同元素通用的写法,不能写成:button:eq(0)这样的选择不具有通用性,祖先节点在判断的时候会无法达到预期的效果。
$("div:eq(0)").on("click",":button",function(){
$(this).clone(true).appendTo("div:eq(0)");
});
// 换成document也可:
$(document).on("click",":button",function(){
$(this).clone(true).appendTo("div:eq(0)");
});
取消委托
off函数还可以取消委托,取消委托必须由祖先节点调用调用方法是:
祖先节点.off(“事件”,”子元素”);
- 1
one()
绑定元素执行完毕后自动移除事件,可以方法仅触发一次的事件。
$(":button").one("click",function(){
alert("one");
});
用到的方法
clone()
生成被选元素的副本,包含子节点、文本和属性。
$(selector).clone(includeEvents)
- includeEvents 规定是否复制元素的所有事件处理。true/false,默认是false
appendTo()
在被选元素的结尾(仍然在内部)插入指定内容。
$("button").click(function(){
$("<b>sss</b>").appendTo("p");
});