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 相关文章推荐
修改file按钮的默认样式实现代码
Apr 23 Javascript
关于JS中的闭包浅谈
Aug 23 Javascript
Javascript学习笔记之函数篇(四):arguments 对象
Nov 23 Javascript
jquery获取节点名称
Apr 26 Javascript
深入浅析JavaScript字符串操作方法 slice、substr、substring及其IE兼容性
Dec 16 Javascript
JavaScript中Array的实用操作技巧分享
Sep 11 Javascript
jQuery源码分析之sizzle选择器详解
Feb 13 Javascript
浅谈Express异步进化史
Sep 09 Javascript
JavaScript数据结构之双向链表和双向循环链表的实现
Nov 28 Javascript
js取小数点后两位四种方法
Jan 18 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
Dec 10 Javascript
利用H5api实现时钟的绘制(javascript)
Sep 13 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制作新闻系统的思路
2006/10/09 PHP
一个SQL管理员的web接口
2006/10/09 PHP
php ob_flush,flush在ie中缓冲无效的解决方法
2010/05/09 PHP
php实现可以设置中奖概率的抽奖程序代码分享
2014/01/19 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
用js实现的一个Flash滚动轮换显示图片代码生成器
2007/03/14 Javascript
js实现的日期操作类DateTime函数代码
2010/03/16 Javascript
Javascript核心读书有感之语句
2015/02/11 Javascript
深入学习JavaScript对象
2015/10/13 Javascript
借助FileReader实现将文件编码为Base64后通过AJAX上传
2015/12/24 Javascript
原生JS下拉加载插件分享
2016/12/26 Javascript
微信小程序实现点击按钮移动view标签的位置功能示例【附demo源码下载】
2017/12/06 Javascript
Vue2.0 事件的广播与接收(观察者模式)
2018/03/14 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
vue中使用vee-validator完成表单校验方案
2019/11/01 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
python 捕获shell脚本的输出结果实例
2017/01/04 Python
多个应用共存的Django配置方法
2018/05/30 Python
浅析Python 实现一个自动化翻译和替换的工具
2019/04/14 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
python中时间转换datetime和pd.to_datetime详析
2019/08/11 Python
python分别打包出32位和64位应用程序
2020/02/18 Python
Django调用支付宝接口代码实例详解
2020/04/04 Python
Python3 pywin32模块安装的详细步骤
2020/05/26 Python
PyCharm2019 安装和配置教程详解附激活码
2020/07/31 Python
《自选商场》教学反思
2014/02/14 职场文书
党校个人自我鉴定范文
2014/03/28 职场文书
献爱心捐款倡议书
2014/05/14 职场文书
外联部演讲稿
2014/05/24 职场文书
学校运动会霸气口号
2014/06/07 职场文书
老兵退伍标语
2014/10/07 职场文书
单位作风建设剖析材料
2014/10/11 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
《我的长生果》教学反思
2016/02/20 职场文书
解决redis批量删除key值的问题
2022/03/23 Redis
A22国内电台短波广播频率表
2022/05/10 无线电