18.5jQuery事件,jQuery自定义插件

绑定事件和关闭事件

1. on绑定事件 off关闭事件

//创建一个div添加到body。
 $("<div></div>").appendTo("body").css({
             width:50,
             height:50,
             backgroundColor:"red"
         }).on("click",clickHandler);//绑定事件
         // div.addEventListener("click",clickHandler);
 
         function clickHandler(e){
             // this  事件侦听的元素  DOM
             // this.removeEventListener("click",clickHandler);
             $(this).off("click",clickHandler);//关闭事件
         } 

2. 事件命名空间
匿名函数不使用函数名清除，都是匿名函数。会将当前jQuery对象所有的click清除，这个时候就需要用到。事件命名空间

  $("<div></div>").appendTo("body").css({
                    width:50,
                    height:50,
                    backgroundColor:"red"
                }).on("click.a",function(){
                    console.log("aaa");
                    $(this).off("click.a");
                }).on("click.b",function(){
                    console.log("bbb");
                })

在事件后面加 .名 用于区分事件

3. 事件传参 on事件可以使用第二个参数进行传参（只可以传一个，可以是对象类型，数组类型）

//1  
obj={
              a:function(){
                  var ab=4;
                  // document.ab=ab;
                  document.addEventListener("click",this.clickHandler);
              },
              clickHandler:function(e){
                  // console.log(this.ab);
              }
  
          } 
 //2
 var obj={
             a:function(){
                 var o={
                     a:1,b:2
                 }
                 $("<div></div>").appendTo("body").css({
                     width:50,
                     height:50,
                     backgroundColor:"red"
                     // on 事件可以使用第二个参数用来传参
                 }).on("click",o,this.clickHandler);
             },
             clickHandler(e){
                 console.log(e);
             }
         }
         obj.a(); 

4. 事件简写

$("<div></div>").appendTo("body").css({
    width: 50,
    height: 50,
    backgroundColor: "red"
}).click(function(){

})
$("<div></div>").appendTo("body").css({
    width: 50,
    height: 50,
    backgroundColor: "red"
}).on("mousedown mouseover mouseout",function(e){
    $(this).off("mousedown mouseover");
    console.log(e.type);
})

hover鼠标移入移除

$("<div></div>").appendTo("body").css({
             width: 50,
             height: 50,
             backgroundColor: "red"
         }).hover(function(){
             // 鼠标经过时执行的函数
         },function(){
             // 鼠标离开时执行的函数
         })

5. 抛发事件 trigger

$("<div></div>").appendTo("body").css({
            width: 50,
            height: 50,
            backgroundColor: "red"
        }).click(function(){
            console.log("abc");
        }).trigger("click");


 var obj={
            a:function(){
                $(document).on("abc",this.abcHandler);
            },
            abcHandler(e,a,b){
                // 从抛发的事件传参过来的内容将会放在事件函数中后面参数一一调用
                console.log(e.type,a,b);
            }
        }

        var obj1={
            b:function(){
                // 必须以数组的方式进行传参
                $(document).trigger("abc",[10,20]);
                // document.dispatchEvent(new Event("abc"));
                // var evt=new Event("abc");
                // evt.a=10;
                // evt.b=20;
                // document.dispatchEvent(evt);
            }
        }

        obj.a();
        obj1.b()

var obj={
    a:function(){
        $(".ab").click(function(){
            console.log("aaa")
        });
        $(".cd").click(function(){
            console.log("bbb")
        })
    }
}

var obj1={
    b:function(){
        // $(".cd").trigger("click");
        $(".cd").triggerHandler("click");//会自动阻止冒泡
    }
}

obj.a();
obj1.b();

发事件传参，抛发事件的后面 数组的形式 进行传参

triggerHandler不会触发默认行为
只能匹配第一个

X 事件其他设置，取消冒泡

 $("<div></div>").appendTo("body").css({
                    width:50,
                    height:50,
                    backgroundColor:"red"
                }).on("click",function(e){
                    // console.log(e);
                    // e.preventDefault();//阻止默认事件
                    // e.isDefaultPrevented();//判断是否设置阻止冒泡
                    // e.stopPropagation();//阻止冒泡
                    // e.isPropagationStopped();//判断是否阻止了冒泡
                    // e.isImmediatePropagationStopped();//
                    // e.stopImmediatePropagation();//判断是否阻止冒泡和默认事件
        
                })

插件

1 extend 静态方法
创建一个颜色的jq静态方法

(function(){
    $.extend({
        randomColor:function(){
            var col="#";
            for(let i=0;i<6;i++){
                col+=Math.floor(Math.random()*16).toString(16);
            }
            return col;
        },
        each1:function(obj,fn){
            if(typeof obj!=="object") return obj;
            if(Array.isArray(obj) || obj.constructor===$){
                for(let i=0;i<obj.length;i++){
                    if(obj[i]===undefined) continue;
                    fn(i,obj[i]);
                }
            }else{
                for(var prop in obj){
                    fn(prop,obj[prop])
                }
            }
        }
    })
})();

用法

 $("<div></div>").css({
            width:50,
            height:50,
            backgroundColor:$.randomColor()
        }).appendTo("body");

**2 fn 创建动态方法时要用return 连缀 **
创建动态方法时要用return 连缀

 (function(){
            $.fn.bc=function(color){
                this.css("backgroundColor",color);
                return this;
            }
            $.fn.rect=function(w,h){
                this.css({
                    width:w,
                    height:h
                })
                return this;
            }
            $.fn.square=function(w,c){
                this.css({
                    width:w,
                    height:w,
                    backgroundColor:c
                });
                return this;
            }
            $.fn.createMenu=function(){ 
                $("<button><span></span><span></span></button>").appendTo(this).css({
                    width:120,
                    height:35,
                    border:"1px solid #000000",
                    backgroundColor:"#FFFFFF",
                    position:"relative"
                }).children().eq(1).css({
                    width:0,
                    height:0,
                    display: "inline-block",
                    borderTop: "10px solid #000000",
                    borderLeft: "10px solid transparent",
                    borderRight: "10px solid transparent",
                    right:5,
                    top:10,
                    position :"absolute"
                })
                return this;
            }
        })();

用法：

$("<div></div>").width(50).height(50).bc("red").appendTo("body");
$("<div></div>").square(50,"red").appendTo("body");
$("<div></div>").createMenu().appendTo("body");

来源：CSDN

作者：人间艾斯卡诺

链接：https://blog.csdn.net/weixin_42863800/article/details/104306802