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 相关文章推荐
超强的IE背景图片闪烁(抖动)的解决办法
Sep 09 Javascript
window.parent调用父框架时 ie跟火狐不兼容问题
Jul 30 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
Jun 22 Javascript
流量统计器如何鉴别C#:WebBrowser中伪造referer
Jan 07 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
ES6中Math对象新增的方法实例详解
Apr 25 Javascript
从vue源码看props的用法
Jan 09 Javascript
JS Generator 函数的含义与用法实例总结
Apr 08 Javascript
在vue-cli3中使用axios获取本地json操作
Jul 30 Javascript
基于JavaScript实现简单扫雷游戏
Jan 02 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
fleaphp下不确定的多条件查询的巧妙解决方法
2008/09/11 PHP
基于header的一些常用指令详解
2013/06/06 PHP
php微信支付接口开发程序
2016/08/02 PHP
关于PHP中字符串与多进制转换函数的实例代码
2016/11/03 PHP
laravel 中如何使用ajax和vue总结
2017/08/16 PHP
PHP实现简单的协程任务调度demo示例
2020/02/01 PHP
加速IE的Javascript document输出的方法
2010/12/02 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
jquery实现预览提交的表单代码分享
2014/05/21 Javascript
动态读取JSON解析键值对的方法
2014/06/03 Javascript
js获取checkbox值的方法
2015/01/28 Javascript
javascript结合Canvas 实现简易的圆形时钟
2015/03/11 Javascript
JavaScript:Date类型全面解析
2016/05/19 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
2016/08/02 Javascript
javascript鼠标跟随运动3种效果(眼球效果,苹果菜单,方向跟随)
2016/10/27 Javascript
JavaScript注入漏洞的原理及防范(详解)
2016/12/04 Javascript
vue-router 学习快速入门
2017/03/01 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
使用 UniApp 实现小程序的微信登录功能
2020/06/09 Javascript
[48:56]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 VG vs KG
2018/03/31 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python的常见命令注入威胁
2013/02/18 Python
Python遍历目录的4种方法实例介绍
2015/04/13 Python
python引入导入自定义模块和外部文件的实例
2017/07/24 Python
Python利用splinter实现浏览器自动化操作方法
2018/05/11 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Python read函数按字节(字符)读取文件的实现
2019/07/03 Python
python 有效的括号的实现代码示例
2019/11/11 Python
使用pygame编写Flappy bird小游戏
2020/03/14 Python
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
印刷工程专业应届生求职信
2013/09/29 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
2014年教师学期工作总结
2014/11/08 职场文书