11-jQuery的事件绑定和解绑

1、绑定事件

语法: 

bind(type , data , fn)

type(string) : 事件类型 

data(object) : (可选)  作为event.data属性值传递给事件对象的额度外数据对象

fn(function) : 绑定到每个匹配元素的事件上面的处理函数

 

示例 : 

当每个p标签被点击的时候 , 弹出其文本 

$("p").bind("click",function(){
   alert($(this),text()); 
});

你可以在时间处理之前传递一些附加的数据 

function handler(event){
// event.data  可以获取bind() 方法的第二个参数的数据 
  alert(event.data.foo);  
}
$("p").bind("click",{foo:"bar"},handler)

通过返回false 来取消默认的行为并阻止事件起泡

$("from").bind("submit",function(){
   return false; 
})

通过 使用preentDefault() 方法 只取消默认的行为 . 

$("from").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.自定义事件

其实事件的绑定和解绑，都是我为了自定义事件做准备（大家把jQuery的提供的事件熟记在心），以后对jquery熟了以后，可以玩一下自定义事件

语法 : 

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());  
});

 

鼠标单双击问题

原理 :     单双击的时间间隔是300ms    如果解决单双击冲突 ,    先做两次单击  一次双击 ,   中间间隔小于300ms

     $(function () {
            var time = null;

            $('div').click(function () {
                // 取消上次延时未执行的方法
                clearTimeout(time);
                //执行延时
                time = setTimeout(function(){
                    //do function在此处写单击事件要执行的代码
                },300);
            });

            $('div').dblclick(functin ({
                // 取消上次延时未执行的方法
                clearTimeout(time);
                //双击事件的执行代码
            });

例如 : 

$(function () {
    var timer = null;
            $('button').click(function(event) {
                console.log(timer);
                clearTimeout(timer);
                // 定时器  300ms 一次性定时器
                timer = setTimeout(function(){
                    console.log('单机了');
                }, 300);

            });

            $('button').dblclick(function(event) {
                console.log(timer);
                clearTimeout(timer);
                console.log('双机了');
        });
});