命名空间jquery

Posted 2020-08-21 Amy-WebFrontEnd

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