首页 > 代码库 > 命名空间jquery

命名空间jquery

命名空间的意思就是 同一个元素有绑定了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处的事件

 

命名空间jquery