27、Jquery 事件
2015-08-27 20:21
726 查看
Jquery 事件
在javascript中事件调用方式为onclick、onmouseover等,在jquery中 使用事件无需写前面的on
bind()方法
为元素绑定事件
使用bind()方法绑定的事件,是多播事件委托,就是再次定义的事件不会覆盖前一个事件
one()方法
绑定一次性事件
unbind()方法
删除事件,取消绑定
快捷事件
javascript事件去掉on基本都支持
click()方法
单击事件
dbclick()方法
双击事件
focus()方法
获得焦点
blur()方法
失去焦点
change()方法
改变时
mouseover()方法
鼠标移入
mouseout()方法
鼠标移出
submit()方法
提交表单
hover()方法
用于解决mouseover和mouseout存在的问题
toggle()方法
依次执行每个函数,如果执行完毕重复执行
Jquery 事件对象
Jquery event将不同浏览器的差异进行了合并,比如可以在所有浏览器中都使用event.target来获取触发者而不用判断浏览器使用srcElement。
在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"); return false; });
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); //返回事件名 click alert(e.target); //返回事件源 谁触发的 alert(e.altKey); //返回alt是否按下 alert(e.screenX);//...等等 js中的事件 });
相关文章推荐
- jquery学习——遍历
- Web前端成长日记--JQuery选择器的妙用
- Jquery树之jsTree----左右联动
- Jquery 的遍历,祖先、后代、同胞以及其过滤
- jquery 获取元素文本信息
- jquery easyui combobox加载数量过多引起渲染页面缓慢问题
- jquery在ie11中的区别
- 一劳永逸的解决jquery的本地引入的方法
- Java Jsp 下拉框 联动 AJAX jquery
- jQuery下拉友情链接美化效果代码分享
- 26、Jquery 基础
- 11. jQuery - Chaining
- jquery在子级页面获取父级元素并赋值
- 10. jQuery Callback 函数
- jquery实现左右滑动菜单效果代码
- 9. jQuery 停止动画
- 8. jQuery 效果 - 动画
- jQuery添加元素节点
- jquery之getJSON
- jQuery实现响应鼠标背景变化的动态菜单效果代码