jQuery：事件操作（二）

四、移除事件

我们可以为同一个元素绑定多个事件，也可以为多个元素绑定同一个事件。

假设网页上有一个<button>元素，使用如下代码为该元素绑定多个事件。

    <button id="but">点击我</button>    <div id="test"></div>    <script>        $(function(){            $("#but").bind("click",function(){                $("#test").append("<p>我的绑定函数1</p>");            }).bind("click",function(){                $("#test").append("<p>我的绑定函数2</p>");            }).bind("click",function(){                $("#test").append("<p>我的绑定函数3</p>");            })        })    </script>

当单击按钮都，会出现如图效果

下面我们来移除他们。

1、移除按钮元素上以前注册的事件

unbind([type][ , data]);

第一个参数是事件类型，第二个参数是要移除的函数（1）若没有参数，删除所有绑定事件（2）若提供了事件类型作为参数，则只删除该类型的绑定事件（3）若都传递，则只有这个特定的事件处理函数会被删除注：对于只需要触发一次，之后就解绑的情况，jQuery提供了one()方法，可以为元素绑定处理函数，触发一次之后，立即删除one()方法的结构与bind()方法类似，使用方法也与bind()方法类似，语法结构： one(type [,data] ,fn);例：移除上面例子中的全部事件
首先在网页上添加一个事件的按钮

<button id="delALL">删除所有事件</button>

最后需要为该事件编写处理函数用于删除元素的所有click事件，代码如下

$("dellALL").click(function(){$("btn").unbind("click");});

因为元素绑定的都是click事件，所以不写参数也可以达到相同的目的，代码如下

$("dellALL").click(function(){$("btn").unbind();});

2、移除<button>元素的其中一个事件
首先需要为这些匿名函数指定一个变量。

五、模拟操作：trigger()

1、常用模拟

使用trigger()方法完成模拟操作：

$("#btn").trigger("click");     // 触发id为btn的click事件// 

也可以简化：$("#btn").click();

2、触发自定义事件

trigger()方法不仅可触发浏览器支持的具有相同名称的事件，也可以触发自定义名称的事件

例：为某元素绑定“myClick”的事件

$('#btn').bind("myClick",function(){    $('#test').append("<p>我的自定义事件</p>");});$('#btn').trigger("myClick");   //触发这个事件

3、传递数据
trigger(type,[data])方法有两个参数，第一个参数是要触发的事件类型，第二个参数是要传递给事件处理函数的附加数据，以数组形式传递。通常可以通过传递一个参数给回调函数来区别这次事件是代码触发，还是用户触发
例：

$('#btn').bind("myClick",function(event,message1,message2){     //获取数据    $('#test').append("<p>"+message1+message2+"</p>");});$('#btn').trigger("myClick",["我的自定义","事件"]);             //传递两个数据

4、执行默认操作
trigger()方法触发事件后，还会执行浏览器默认操作，例如：

$('input').trigger("focus");

以上代码不仅会触发绑定在input上的focus事件，也会使input元素获得焦点（这是浏览器的默认操作）。

而使用triggerHandler()方法可以只触发事件，而不执行浏览器默认操作，例：

$('input').triggerHandler("focus");

只会触发绑定事件，不会使input元素获得焦点

六、其他用法

1、绑定多个事件类型

例：

$(function(){     $("div").bind("mouseout mouseover",function(){          $(this).toggleClass("over");      });};

当光标滑入<div>元素时，该元素的class切换为“over”;当光标滑出<div>元素时，class切换为先前的值。

2、添加事件命名空间，便于管理

$(function(){    $('div').bind("click.plugin",function(){        $('body').append("<p>click事件</p>");    });    $('div').bind("mouseover.plugin",function(){        $('body').append("<p>mouseover事件</p>");    });    $('div').bind("dbclick",function(){        $('body').append("<p>dbclick事件</p>");    });    $('button').click(function(){        $('div').unbind(".plugin");    });});

在所绑定的事件后面添加命名空间，删除时只需要指定命名空间即可，单击<button>后，plugin的命名空间被删除，而不再plugin空间中的dbclick事件依然存在。

3、相同事件名称，不同命名空间执行方法

$(function(){    $('div').bind("click",function(){        $('body').append("<p>click事件</p>");    });    $('div').bind("click.plugin",function(){        $('body').append("<p>click.plugin事件</p>");    });    $('button').click(function(){        $('div').trigger("click!"); //注意感叹号    });});

单击<div>元素后，会同时触发click事件和click.plugin事件，若只单击<button>则只触发click事件，不触发click.plugin事件，注意trigger("click!")后面的感叹号的作用是匹配所有不包含命名空间中的click方法

若两者都要触发，改为如下代码：

$("div").trigger("click");