jQuery中事件的命名空间 -

carge

浏览: 51869 次

最近访客更多访客>>

haiyupeter

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (50)

社区版块

存档分类

jQuery中事件的命名空间

jQuery中1.2版本之后引入了命名空间。这个一般小型项目很少用到，但是在框架中用得较多，如Bootstrap的jquery插件。

命名空间的好处是可以集中，分开解绑。在下面的例子中，element收到click, click.ns1, click.ns2, click.ns1.ns2和click.ns2.ns1都将执行绑定的函数。

$('#element').on('click.ns1.ns2', function(e){
});

<html>
<head>
<title>Event Name Space</title>
<script src="js/jquery-2.0.3.min.js"></script>
</head>
<body>

<input type="button" onClick="trigger('click')" value="trigger('click')" />
<input type="button" onClick="trigger('click.ns1')" value="trigger('click.ns1')" />
<input type="button" onClick="trigger('click.ns2')" value="trigger('click.ns2')" />
<input type="button" onClick="trigger('click.ns1.ns2')" value="trigger('click.ns1.ns2')" />
<input type="button" onClick="trigger('click.ns2.ns1')" value="trigger('click.ns2.ns1')" />
<input type="button" onClick="trigger('ns1')" value="trigger('ns1')" />
<input type="button" onClick="trigger('ns2')" value="trigger('ns2')" />
<input type="button" onClick="trigger('ns1.ns2')" value="trigger('ns1.ns2')" />

<div id="element"></div>
<div id="log"></div>

<script type="text/jscript">
bind();
function bind(){
	var $el = $('#element');
	$el.on('click.ns1', function(e){
		log('click.ns1', e);
	})
	.on('click.ns2', function(e){
		log('click.ns2', e);
	})
	.on('click.ns1.ns2', function(e){
		log('click.ns1.ns2', e);
	})
	.on('click.ns2.ns1', function(e){
		log('click.ns2.ns1', e);
	})
	.on('ns1', function(e){
		log('ns1', e);
	})
	.on('ns2', function(e){
		log('ns2', e);
	})
	.on('ns1.ns2', function(e){
		log('ns1.ns2', e);
	});
}

function log(name, e){
	var html = '<p><strong>' + name + '</strong> GET - <strong>' + e.type + '.' + e.namespace + '</strong></p>';
	$('#log').append(html);
}

function trigger(name){
	$('#log').html('');
	
	$('#element').trigger(name);
}
</script>
</body>
</html>

输出：

分享到：