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 相关文章推荐
JS效率个人经验谈(8-15更新),加入range技巧
Jan 09 Javascript
JavaScript 面向对象编程(1) 基础
May 18 Javascript
早该知道的7个JavaScript技巧
Mar 27 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
JQuery限制复选框checkbox可选中个数的方法
Apr 20 Javascript
JavaScript中的toDateString()方法使用详解
Jun 12 Javascript
jQuery 遍历函数详解
Jul 05 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
JS实现旋转木马式图片轮播效果
Jan 18 Javascript
解决vue 引入子组件报错的问题
Sep 06 Javascript
js实现左右轮播图
Jan 09 Javascript
js实现坦克大战游戏
Feb 24 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载入页面时编码的方法
2014/07/29 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP 返回13位时间戳的实现代码
2016/05/13 PHP
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
JavaScript去掉数组中的重复元素
2011/01/13 Javascript
Javascript 八进制转义字符(8进制)
2011/04/08 Javascript
jquery focus(fn),blur(fn)方法实例代码
2011/12/16 Javascript
javascript加号"+"的二义性说明
2013/03/04 Javascript
javascript屏蔽右键代码
2014/05/15 Javascript
jquery的attr方法禁用表单元素禁用输入内容
2014/06/23 Javascript
javascript下拉框选项单击事件的例子分享
2015/03/04 Javascript
简单实现限制uploadify上传个数
2015/11/16 Javascript
分享我的jquery实现下拉菜单心的
2015/11/29 Javascript
关于微信jssdk实现多图片上传的一点心得分享
2016/12/13 Javascript
react系列从零开始_简单谈谈react
2017/07/06 Javascript
浅谈箭头函数写法在ReactJs中的使用
2017/08/22 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
微信小程序使用template标签实现五星评分功能
2018/11/03 Javascript
[08:56]DOTA2-DPC中国联赛2月23日Recap集锦
2021/03/11 DOTA
python中私有函数调用方法解密
2016/04/29 Python
使用PyInstaller将Python程序文件转换为可执行程序文件
2016/07/08 Python
python 读写、创建 文件的方法(必看)
2016/09/12 Python
Python scikit-learn 做线性回归的示例代码
2017/11/01 Python
Python编程实现线性回归和批量梯度下降法代码实例
2018/01/04 Python
如何使用VSCode愉快的写Python于调试配置步骤
2018/04/06 Python
mac安装pytorch及系统的numpy更新方法
2018/07/26 Python
python celery分布式任务队列的使用详解
2019/07/08 Python
Python基础之字符串操作常用函数集合
2020/02/09 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
用python对oracle进行简单性能测试
2020/12/05 Python
python调用jenkinsAPI构建jenkins,并传递参数的示例
2020/12/09 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
CSS3实现全景图特效示例代码
2018/03/26 HTML / CSS
历史学专业求职信
2014/06/19 职场文书
理财学专业自荐书
2014/06/28 职场文书
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技