27、Jquery事件

Jquery 事件

在javascript中事件调用方式为onclick、onmouSEOver等，在jquery中 使用事件无需写前面的on

bind()方法

为元素绑定事件

$("#id").bind("click",function(){//为id绑定click事件alert("ok");

});

使用bind()方法绑定的事件，是多播事件委托，就是再次定义的事件不会覆盖前一个事件

//可以按顺序执行两个事件$("#id").bind("click",function(){alert("1");});

$("#id").bind("click",function(){alert("2")});

one()方法

绑定一次性事件

//只执行一次单击操作 下次不会再执行$("#id").one("click",function(){

alert("a");returnfalse;

});

unbind()方法

删除事件，取消绑定

$("#id").unbind();//删除id的所有事件$("#id").unbind("click");//删除id的所有click事件

快捷事件

Javascript事件去掉on基本都支持

click()方法

单击事件

$("#id").click();//如果不写函数体 表示立即触发事件$("#id").click(function(){//这是一个点击事件});

dbclick()方法

双击事件

$("#id").dbclick();//触发事件$("#id").dbclick(function(){//双击后执行});

focus()方法

获得焦点

$("#id").focus();//触发$("#id").focus(function(){//获得焦点后执行});

blur()方法

失去焦点

$("#id").blur();//触发失去焦点事件$("#id").blur(function(){//失去焦点后执行});

change()方法

改变时

$("#id").change();//触发改变事件$("#id").change(function(){//改变后执行});

mouseover()方法

鼠标移入

$("#id").mouseover();

$("#id").mouseover(function(){});

mouseout()方法

鼠标移出

$("#id").mouseout();

$("#id").mouseout(function(){});

submit()方法

提交表单

$("#id").submit();

$("#id").submit(function(){});

hover()方法

用于解决mouseover和mouseout存在的问题

//两个function 分别对应移入和移出$("div").hover(function(){

$("div").html("啊啊啊啊啊啊啊 快跑啊他来了");

},function(){

$("div").html("呼、吓死了 终于走了！")

});

toggle()方法

依次执行每个函数，如果执行完毕重复执行

$("#div").toggle(function(){

$("#div").CSS({ "width": "100px"});

},function(){

$("#div").css({ "width": "200px"});

},function(){

$("#div").css({ "width": "300px"});

}

);

Jquery 事件对象

Jquery event将不同浏览器的差异进行了合并，比如可以在所有浏览器中都使用event.target来获取触发者而不用判断浏览器使用srcElement。

$("#div").click(function(e){

alert(e.type);//返回事件名 clickalert(e.target);//返回事件源 谁触发的alert(e.altKey);//返回alt是否按下alert(e.screenX);//...等等 js中的事件});