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 相关文章推荐
ExtJS 2.0 实用简明教程之布局概述
Apr 29 Javascript
jQuery.get、jQuery.getJSON、jQuery.post无法返回JSON问题的解决方法
Jul 28 Javascript
Fastest way to build an HTML string(拼装html字符串的最快方法)
Aug 20 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
jQuery实现背景弹性滚动的导航效果
Jun 01 Javascript
通过bootstrap全面学习less
Nov 09 Javascript
基于匀速运动的实例讲解(侧边栏,淡入淡出)
Oct 17 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
浅谈vue项目重构技术要点和总结
Jan 23 Javascript
jQuery实现的滑块滑动导航效果示例
Jun 04 jQuery
node.js监听文件变化的实现方法
Apr 17 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 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目录与文件操作
2011/12/30 PHP
浅析使用Turck-mmcache编译来加速、优化PHP代码
2013/06/20 PHP
PHP封装的一个支持HTML、JS、PHP重定向的多功能跳转函数
2014/06/19 PHP
PHP封装的数据库保存session功能类
2016/07/11 PHP
ZendFramework框架实现连接两个或多个数据库的方法
2016/12/08 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
针对PHP开发安全问题的相关总结
2019/03/22 PHP
jQuery获取浏览器中的分辨率实现代码
2013/04/23 Javascript
javascript四舍五入函数代码分享(保留后几位)
2013/12/10 Javascript
浅析BootStrap模态框的使用(经典)
2016/04/29 Javascript
微信小程序 页面之间传参实例详解
2017/01/13 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
webstrom Debug 调试vue项目的方法步骤
2018/07/17 Javascript
详解es6超好用的语法糖Decorator
2018/08/01 Javascript
angular6.x中ngTemplateOutlet指令的使用示例
2018/08/09 Javascript
在vue中读取本地Json文件的方法
2018/09/06 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
2018/11/20 jQuery
基于three.js实现的3D粒子动效实例代码
2019/04/09 Javascript
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
2019/06/10 jQuery
vue监听用户输入和点击功能
2019/09/27 Javascript
[02:54]DOTA2英雄基础教程 撼地者
2014/01/14 DOTA
[49:13]DOTA2上海特级锦标赛C组资格赛#1 OG VS LGD第一局
2016/02/27 DOTA
Python用Pillow(PIL)进行简单的图像操作方法
2017/07/07 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
django 实现电子支付功能的示例代码
2018/07/25 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
15行Python代码实现网易云热门歌单实例教程
2019/03/10 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
django中forms组件的使用与注意
2019/07/08 Python
奥地利顶级内衣丝袜品牌英国站:Wolford英国
2016/08/29 全球购物
民间借贷借条如何写
2015/05/26 职场文书
《鲁班学艺》读后感3篇
2019/11/27 职场文书
nginx常用配置conf的示例代码详解
2022/03/21 Servers
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js
如何Python使用re模块实现okenizer
2022/04/30 Python
python+pyhyper实现识别图片中的车牌号思路详解
2022/12/24 Python