命名空间的意思就是 同一个元素有绑定了2个相同的事件,比如2个scroll,这个时候你做其他交互的时候只想触发第二个scroll事件 就可以用命名空间做了
<button id="but">命名空间</button>
<p></p>
说明命名空间之前,先来看一下原生js及jq的函数覆盖问题:
原生js使用onclick时同一个元素有绑定了2个相同的事件,后面的事件会覆盖前面的事件
var but = document.getElementById("but");
but.onclick = function(){
alert('原生js:相同元素定义的第一个事件');
}
but.onclick = function(){
alert('原生js:相同元素定义的相同的第二个事件,但是会覆盖前面的第一个事件');
}
jquery中click(function(){}) 、 on、bind 绑定的事件不会被覆盖 默认绑定几个 就触发几个
click事件:
$("button").click(function(){
alert("jquery click aaaaa");
});
$("button").click(function(){
alert("jquery click bbbbb");
});
on事件:
$("button").on("click",function(){
alert("jquery on click aaaaa");
});
$("button").on("click",function(){
alert("jquery on click bbbbb");
});
bind事件:
$("button").bind("click",function(){
alert("jquery bind click aaaaa");
});
$("button").bind("click",function(){
alert("jquery bind click bbbbb");
});
jq中click、on、bind事件中定义几个就会触发几个,如果只想触发其中一下怎么办呢?
那就用到了命名空间:
http://hemin.cn/jq/event.namespace.html
$("p").bind('test.something',function(event){
alert(event.namespace);
});
$("p").bind('test.hello',function(event){
alert(event.namespace);
});
$("button").click(function(event) {
$("p").trigger("test.something");
});
点击button时只触发空间something处的事件