(一)使用命名空间对时间进行管理,代码如下:



<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>事件命名空间</title>
</head>

<body>
<div id="eve">
绑定事件域名空间
</div>
<button type="button" id="cancel">取消绑定的所有事件</button>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#eve').bind('mouseout.plugin', function() {
alert('mouseout事件');
});
$('#eve').bind('mousemove.plugin', function() {
alert('mousemove事件');
});
$('#cancel').bind('click', function() {
$('#eve').unbind('.plugin');
});
});
</script>
</body>

</html>


优势:

删除事件时只需要指定命名空间即可,删除plugin空间的事件只需要一行代码即可,由于click事件不在plugin的空间内,所以click事件仍然有效。

(二)触发事件



<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8" />
<title>事件命名空间</title>
</head>

<body>
<div id="eve">
绑定事件域名空间
</div>
<button type="button" id="cancel">取消绑定的所有事件</button>
<script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
$('#eve').bind('click', function() {
alert('click事件');
});
$('#eve').bind('click.plugin', function() {
alert('click在plugin空间下的事件');
});
$('#cancel').click(function() {
//触发click事件 而不是click在plugin空间下的事件
$('#eve').trigger('click!');
//触发click在plugin空间下的事件
//$('#eve').trigger('click.plugin');
//触发所有的click事件
$('#eve').trigger('click');
});
});
</script>
</body>

</html>


关键代码:

//触发click事件 而不是click在plugin空间下的事件
$('#eve').trigger('click!');
//触发click在plugin空间下的事件
//$('#eve').trigger('click.plugin');
//触发所有的click事件
$('#eve').trigger('click');
说明:此jquery版本最最高为1.8.3,再高的版本对$('#eve').trigger('click!')触发不了事件,已进行测试。