jQuery的事件绑定和解除
1 . 绑定事件
语法 : html
bind(type,data,fn)
描述 : 为每个匹配的特定元素(像 click)绑定一个事件处理器函数.jquery
type(String) : 事件类型ide
data(Object) : (可选)做为 event.data 属性值传递给事件对象的额外数据对象/函数
fn(Function) : 绑定到每一个匹配元素的事件上面的处理函数.this
示例 : spa
当每一个p标签被点击的时候,弹出器文本code
$("p").bind("click",function(){
alert($(this).text() );
})
在事件处理前传递一些附加的数据.orm
function handler(event) { //event.data 能够获取 bind()方法的第二个参数的数据 alert(event.data.foo) ; } $("p").bind("click", {foo: "bar"}, handler)
经过返回false来取消默认的行为并阻止事件的起泡.htm
$("form").bind("submit", finction() {return false; })
经过使用 preventDefault( ) 方法值取消默认的行为.对象
$("form").bind("submit", function(event){
event.preventDefault();
});
2 . 解除事件
语法 :
unbind(type,fn);
解释 :
bind() 的反向操做,从每个匹配元素中删除绑定的事件.
若是没有参数,则删除绑定的事件.
若是把绑定时传递的处理函数做为第二个参数,则只有这个特定的事件处理函数被删除.
type(String) : (可选),事件类型.
fn(Function) :(可选),要从每一个匹配元素的事件中反绑定的事件处理函数.
示例 :
把全部段落的全部事件取消绑定
$("p").unbind()
将段落中的 click 事件取消绑定
$("p").unbind("click")
删除特定函数的绑定,将函数做为第二个参数传入.
var foo = function () { // 绑定事件 和 解除事件的事件处理函数 }; $("p").bind("click mouseenter", foo); // 给p段落绑定 click.mouseenter事件 $("p").unbind("click", foo); 只解除了p段落标签的 click 事件
3 . 自定义事件
语法 :
trigger(type,data);
解释 : 在每个匹配的元素上触发某类事件,它触发的是由 bind() 注册的自定义事件.
type(String) : 要触发的事件类型.
data(Array) : (可选)传递给事件处理函数的附加参数.
示例 :
给一个按钮添加自定义事件
$("button").bind('myClick',function(ev,a,b)) {
// 给按钮 button 添加自定义事件 myClick 事件
}
而后经过 trigger() 触发自定义事件
$('button').trigger('myClick',[1,2])
4 . 一次性事件
语法 :
one(type,data,fn)
解释 : 为每个匹配元素的特定事件(好比 click ) 绑定一个一次性的事件处理函数,在每一个对象上,这个事件处理函数只会被执行一次,其余规则与 bind() 函数相同.
type(String) : 事件类型
data(Object) : (可选) 做为event.data属性值传递给事件对象的额外数据对象.
fn(Function) : 绑定到每一个匹配元素的事件上面的处理函数.
示例 :
当全部段落被第一个点击的时候,显示所其文本.
$("p").one("click", function() {
// 只有第一次点击的时候才会触发,再次点击不会触发了.
alert($(this).text() );
});
5 . 单双击事件
在点击按钮的时候,会出现双击的时候会有2次单击事件的发生.
好比 :
解决 ;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <button>按钮</button> <script src="jquery.js"></script> <script> $(function () { // var time = null; // // $('div').click(function () { // // 取消上次延时未执行的方法 // clearTimeout(time); // //执行延时 // time = setTimeout(function(){ // //do function在此处写单击事件要执行的代码 // },300); // }); // // $('div').dblclick(functin ({ // // 取消上次延时未执行的方法 // clearTimeout(time); // //双击事件的执行代码 // }); // 单双击 的时间 间隔 是300ms // 若是解决 单双击冲突 // 先作两次单击 一次双击 中间间隔 小于300ms // 定义 timer是null, var timer = null; $('button').click(function(event) { // console.log(timer); //清楚定时器,用定时器的时候要先清除定时器.当咱们双击的时候,在点击第一下的时候,时间没到300ms, // 因此不会走 timer = setTimeout(function() 函数.第二下点击的时候清除的是第一下点击的定时器,因此第二次 // 没有到300ms.因此显示双击,在双击的时候清除第二次点击的定时器. clearTimeout(timer); // 定时器 300ms 一次性定时器 timer = setTimeout(function(){ console.log('单机了'); }, 300); }); $('button').dblclick(function(event) { // console.log(timer); clearTimeout(timer); console.log('双机了'); }); }) </script> </body> </html>