- 场景:页面上的某个元素bind多个click事件处理函数,视用户的具体交互情况来决定到底使用哪个处理函数。
-
问题:
- unbind时会解绑所有的click事件,造成误伤。如果之前bind时有定义处理函数的方法名,可以通过将方法名传给unbind的第二个参数来解绑指定的bind;但很多情况下bind的处理函数都是匿名函数,此时unbind的第二个参数无法处理。
- click事件发生时无法指定调用某个具体的事件处理函数,只能将不该调用的函数给unbind掉。
- 解决:采用命名空间,命名空间用法
-
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="Script/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function myfunction1() {
alert(1);
return false;
}
function myfunction2() {
alert(2);
return false;
}
function myfunction3() {
alert(3);
return false;
}
$(function () {
$('#test').bind('click.a', myfunction1);
$('#test').bind('click.b', myfunction2);
$('#test').bind('click.c', myfunction3); $('#test').unbind('click.a');
//$('#test').trigger('click.b');
$('#test').trigger();
// $('#test').click();
})
</script>
</head>
<body>
<input id="test" type="button" name="button" value="button" width="70">
</body>
</html>通过事件名(click)后加'.'来指定新的命名,本例中分别指定的新的命名a、b、c,这样在unbind时就可以解绑指定的函数;在trigger时就可以调用指定的函数。很多js扩展功能都采用命名空间来区分出自己的事件和避免与页面原有事件产生冲突。
- 参考链接:http://blog.csdn.net/clangke/article/details/7612224