bind()方法的其它用法

bind()方法不仅能为元素绑定浏览器支持的具有相同名称的事件,也可以绑定自定义事件。不仅如此,bind()方法还能做很多的事情。

1.绑定多个事件类型

例如可以为元素一次性绑定多个事件类型。jQuery代码如下:

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

当光标插入div元素时,该元素的class切换为“over”;当光标画出“div”元素时,class切换为先前的值。这段代码等同于下面的代码:

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

很显然,第一种方法能减少代码量。

2.添加事件命名空间,便于管理

例如可以把元素绑定的多个事件类型用于命名空间规范起来,jQuery代码如下:

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

在所绑定的事件类型后面添加命名空间,这样在删除事件时只需要指定命名空间即可。单击button元素后,“plugin”的命名空间被删除,而不在“plugin”的命名空间“dblclick”事件依然存在。

删除多个事件代码也可以写为以下链式代码,但显然下面的方式写的更少。

$("div").unbind("click").unbind("mouseover");3.相同事件名称,不同命名空间执行方法

例如可以为元素绑定相同的事件类型,然后以命名空间的不同按需要调用,jQuery代码如下:

$(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!"); //注意click后面的感叹号    });})

当单击div元素后,会同时触发click事件和click.plugin事件。如果知识单击button元素,则只触发click.plugin事件。注意,trigger(“click!”)后面的感叹号的作用是匹配多有不包含在命名空间中的click方法。

如果需要两者都被触发,改为如下代码即可:

$("div").trigger("click"); // 去掉感叹号

原文地址:https://www.cnblogs.com/danghuijian/p/4400048.html