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\")})

事件