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 相关文章推荐
Prototype中dom对象方法汇总
Sep 17 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
简单实用的反馈表单无刷新提交带验证
Nov 15 Javascript
JS实现具备延时功能的滑动门菜单效果
Sep 17 Javascript
iframe中使用jquery进行查找的方法【案例分析】
Jun 17 Javascript
AngularJS监听路由的变化示例代码
Sep 23 Javascript
Angular之指令Directive用法详解
Mar 01 Javascript
在vue项目中安装使用Mint-UI的方法
Dec 27 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
Javascript实现异步编程的过程
Jun 18 Javascript
基于element-ui的rules中正则表达式
Sep 04 Javascript
修改Vue打包后的默认文件名操作
Aug 12 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
使用数据库保存session的方法
2006/10/09 PHP
PHP array操作10个小技巧分享
2011/06/23 PHP
PHP5.4中json_encode中文转码的变化小结
2013/01/30 PHP
详解PHP中的mb_detect_encoding函数使用方法
2015/08/18 PHP
PHP实现文件上传操作和封装
2020/03/04 PHP
jQuery html() in Firefox (uses .innerHTML) ignores DOM changes
2010/03/05 Javascript
js自动生成的元素与页面原有元素发生堆叠的解决方法
2013/10/24 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
javascript事件模型介绍
2016/05/31 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
JavaScript折半查找(二分查找)算法原理与实现方法示例
2018/08/06 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
Laravel admin实现消息提醒、播放音频功能
2019/07/10 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python基于动态规划算法计算单词距离
2015/07/25 Python
Python和JavaScript间代码转换的4个工具
2016/02/22 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python实现的爬虫功能代码
2017/06/24 Python
详解python中sort排序使用
2019/03/23 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
详细介绍Python进度条tqdm的使用
2019/07/31 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python编写单元测试代码实例
2020/09/10 Python
matplotlib部件之套索Lasso的使用
2021/02/24 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
幼儿教师自我鉴定
2013/11/02 职场文书
新闻编辑专业毕业自荐书范文
2014/02/05 职场文书
《记承天寺夜游》教学反思
2014/02/16 职场文书
大型活动组织方案
2014/05/10 职场文书
公司活动总结怎么写
2014/06/25 职场文书
社会工作专业求职信
2014/07/15 职场文书
2014年团队工作总结
2014/11/24 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
Redis特殊数据类型Geospatial地理空间
2022/06/01 Redis