jQuery学习笔记之jQuery的事件


Posted in Javascript onDecember 22, 2010

一.事件绑定

1.事件绑定函数
事件的绑定函数为如下形式:
.bind(type [,data],fn)
type:类型 如click.....
data:参数
fn:事件执行的函数

例子

$(function(){ 
$(#id1).click(function(){ 
$(#id2).show();//id2显示 
}) ; 
});

二.合成事件
1.鼠标滑过事件
.hover(enter,leave)
enter:鼠标光标移动到对象时触发的函数
leave:鼠标光标移出对象触发的函数

例子:

$(function(){ 
$(#id1).hover(function(){ 
$(#id2).show();//id2显示 
},function(){ 
$(#id2).hide();//id2隐藏 
}) ; 
});

2.连续单击事件
.toggle(fn1,fn2.......,fnN)
fn:单击第一次执行fn1,第二次fn2,以此类推

三.事件冒泡
事件总是由内层开始执行,一直到最外层,不单击了那个对象,所有包含了此对象的对象所绑定的事件都将执行一次,这是我们不愿意看到的,jQuery给我们定义了一些阻止事件执行的方法
1.事件对象获取
获取事件对象的方法就是为事件执行函数添加一个参数
$(#id1).click(function(even){});//even就是获取到的事件对象
2.阻止事件冒泡
我们可以在事件执行函数中加入如此啊代码,阻止事件冒泡
even.stopPropagation();
3.阻止默认事件
浏览器默认事件是指,按钮单击后提交,单击链接后打开链接等,jQuery也可以阻止这些默认事件的执行
even.preventDefault();

四.获取事件对象的属性
even.type();//获取事件的类型,
如:
$(#id1).click(function(even){
alert(even.type);
return false;
});//返回“click”

even.target();//获取触发事件的对象

even.while();获取鼠标单击的1=左,2=中,3=右键

五.移除事件
.unbind(type [,data]);

例子:

$(function(){ 
$(#id1).bind("click",fn1=function(){alert(“事件1”);}) .bind("click",fn2=function(){alert(“事件2”);}); 
.bind("click",fn3=function(){alert(“事件3”);}); 
}); 
$("#id2").click(function(){ 
$(#id1).unbind("click",fn2);//删除fn2的click事件 
});

六.其他操作
1.绑定多个事件
.bind(type [,data],fn).bind(type [,data],fn)...... ;
.bind(type type..... [,data],fn) ;
2.添加事件命名空间
.bind(type.namespace [,data],fn) ;
使用时只需指定命名空间即可,如:$(#id1).unbind(".namespace")
Javascript 相关文章推荐
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
jQuery拖动div、移动div、弹出层实现原理及示例
Apr 08 Javascript
javascript中bind函数的作用实例介绍
Sep 28 Javascript
使用Chrome调试JavaScript的断点设置和调试技巧
Dec 16 Javascript
jQuery中prepend()方法用法实例
Dec 25 Javascript
jQuery支持动态参数将函数绑定到事件上的方法
Mar 17 Javascript
javascript制作2048游戏
Mar 30 Javascript
浅谈js里面的InttoStr和StrtoInt
Jun 14 Javascript
JavaScript省市区三级联动菜单效果
Sep 21 Javascript
图片文字识别(OCR)插件Ocrad.js教程
Nov 26 Javascript
react koa rematch 如何打造一套服务端渲染架子
Jun 26 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
jQuery学习笔记之jQuery的DOM操作
Dec 22 #Javascript
jQuery学习笔记之jQuery选择器的使用
Dec 22 #Javascript
jQuery学习笔记之DOM对象和jQuery对象
Dec 22 #Javascript
jQuery学习笔记之Helloworld
Dec 22 #Javascript
用Jquery实现多级下拉框无刷新的联动
Dec 22 #Javascript
一个轻量级的javascript库 pj介绍
Dec 19 #Javascript
JavaScript Date对象 日期获取函数
Dec 19 #Javascript
You might like
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
一个好用的PHP验证码类实例分享
2013/12/27 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
JS 容错处理代码, 屏蔽错误信息
2021/03/09 Javascript
JavaScript NaN和Infinity特殊值 [译]
2012/09/20 Javascript
js用Date对象处理时间实现思路及代码
2013/01/31 Javascript
jquery bind(click)传参让列表中每行绑定一个事件
2014/08/06 Javascript
easyui Draggable组件实现拖动效果
2015/08/19 Javascript
Node.js本地文件操作之文件拷贝与目录遍历的方法
2016/02/16 Javascript
jQuery 更改checkbox的状态,无效的解决方法
2016/07/22 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
简单的渐变轮播插件
2017/01/12 Javascript
nodejs 图解express+supervisor+ejs的用法(推荐)
2017/09/08 NodeJs
Vue实现动态创建和删除数据的方法
2018/03/17 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
Layui事件监听的实现(表单和数据表格)
2019/10/17 Javascript
[49:21]2018DOTA2亚洲邀请赛3月30日 小组赛B组 Effect VS iG
2018/03/31 DOTA
Python实现读取TXT文件数据并存进内置数据库SQLite3的方法
2017/08/08 Python
python实现外卖信息管理系统
2018/01/11 Python
python可视化实现代码
2019/01/15 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
详解css3中 text-fill-color属性
2019/07/08 HTML / CSS
Tory Burch美国官方网站:美国时尚生活品牌
2016/08/01 全球购物
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
英国空调、除湿机和通风设备排名第一:Air Con Centre
2019/02/25 全球购物
Linux的文件类型
2012/03/07 面试题
开办大学饮食联盟创业计划书
2014/01/29 职场文书
《我要的是葫芦》教学反思
2014/02/23 职场文书
2014党员学习兰辉先进事迹思想汇报
2014/09/17 职场文书
普通党员整改措施
2014/10/24 职场文书
部门2015年度工作总结
2015/04/29 职场文书
就业证明函
2015/06/17 职场文书
2015年工商局个人工作总结
2015/07/23 职场文书
八年级作文之友情
2019/11/25 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python