jQuery中的事件

事件

添加事件和删除事件

$(“div”).on(“click”,clickHandler); //添加事件

function clickHandler(e){
console.log(“a”);
$(this).off(“click”,clickHandler);//删除事件
}

$(“div”).on(“click.a”,function(e){
console.log(“a”);
$(this).off(“click”); 将所有click事件的内容全部删除
$(this).off(“click.a”); 命名空间可以解决删除所有同类事件的问题
}).on(“click.b”,function(){
console.log(“b”);
})

带有参数的事件

var obj={
    a:1,
    b:function(){
        //这种添加事件的方式，参数放在事件类型和事件函数中间
        $("div").on("click",this,function(e){
            console.log(e);  //e.data就是传入的参数obj(this),也就是上面传入的参数this。
            })

        $("div").on("click",{a:this.a,b:10},function(e){
            console.log(e.data); //e.data是第二位的参数{a:this.a,b:10}-->{a:obj.a,b:10}-->{a:1,b:10}
        })
    }
}
obj.b();

抛发事件

$(“div”).trigger(“chilema”);//抛发事件

抛发事件参数位置：事件函数参数e后
一个参数：
$(“div”).on(“chilema”,function(e,o){
console.log(e,o); o:{a:1,b:10}
})

$(“div”).trigger(“chilema”,{a:1,b:10});

多个参数：
$(“div”).on(“chilema”,function(e,a,b,c){
console.log(e,a,b,c);
})
$(“div”).trigger(“chilema”,[10,100,1000])

$(“form”).trigger(“submit”);//会触发默认事件
$(“form”).triggerHandler(“submit”);//这个不会触发默认事件

triggerHandler() 方法抛发被选元素的指定事件类型。但不会执行浏览器默认动作，也不会产生事件冒泡。
triggerHandler() 方法与 trigger() 方法类似。不同的是它不会触发事件（比如表单提交）的默认行为，而且只影响第一个匹配元素。

添加事件的简易写法

$("div").click(function(){
    $(this).css("backgroundColor","green");
});
$("div").mousedown(function(){

})

拖拽元素

$("div").mousedown(function(e){
    var div=$(this);
    e.preventDefault();
    $(document).mousemove(function(e1){
        div.css({
            left:e1.clientX-e.offsetX,
            top:e1.clientY-e.offsetY,
        })
    }).mouseup(function(){
        $(this).off("mousemove mouseup");   //删除事件可以一起删除
    })
})

两种加载DOM的函数区别

  $(document).ready(function(){
    // 当DOM全部创建完成后，图片没有加载完成前
  })
  window.onload=function(){
      //全部的DOM包括图片全部加载完成
  }

hover

hover事件中，有两个事件函数，一个是滑入后的状态，另一个是离开后的状态
$("div").hover(function(){
      $(this).css("backgroundColor","green")
},function(){
    $(this).css("backgroundColor","red")
})