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 相关文章推荐
JavaScript Event学习第八章 事件的顺序
Feb 07 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
js对字符的验证方法汇总
Feb 04 Javascript
JavaScript中使用Object.prototype.toString判断是否为数组
Apr 01 Javascript
RequireJS多页面应用实例分析
Jun 29 Javascript
jQuery查找和过滤_动力节点节点Java学院整理
Jul 04 jQuery
浅谈关于angularJs中使用$.ajax的注意点
Aug 12 Javascript
详解JS中的柯里化(currying)
Aug 17 Javascript
在vue项目中正确使用iconfont的方法
Sep 28 Javascript
VueJs里利用CryptoJs实现加密及解密的方法示例
Apr 29 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 Javascript
JavaScript实现简单图片切换
Apr 29 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+DBM的同学录程序(4)
2006/10/09 PHP
PHP 和 XML: 使用expat函数(一)
2006/10/09 PHP
PHP正确配置mysql(apache环境)
2011/08/28 PHP
php中用加号与用array_merge合并数组的区别深入分析
2013/06/03 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
PHP7.1新功能之Nullable Type用法分析
2016/09/26 PHP
PHP实现的mongoDB数据库操作类完整实例
2018/04/10 PHP
php实现微信原生支付(扫码支付)功能
2018/05/30 PHP
JavaScript 面向对象的之私有成员和公开成员
2010/05/04 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
JS+CSS实现的蓝色table选项卡效果
2015/10/08 Javascript
动态加载js文件简单示例
2016/04/21 Javascript
Bootstrap实现下拉菜单效果
2016/04/29 Javascript
Javascript for in的缺陷总结
2017/02/03 Javascript
JS实现多张图片预览同步上传功能
2017/06/23 Javascript
Javascript中Promise的四种常用方法总结
2017/07/14 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
webpack external模块的具体使用
2018/03/10 Javascript
vue中$refs的用法及作用详解
2018/04/24 Javascript
element上传组件循环引用及简单时间倒计时的实现
2018/10/01 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
Nuxt.js实现一个SSR的前端博客的示例代码
2019/09/06 Javascript
python中in在list和dict中查找效率的对比分析
2018/05/04 Python
Python读写docx文件的方法
2018/05/08 Python
解决matplotlib库show()方法不显示图片的问题
2018/05/24 Python
Python学习笔记之pandas索引列、过滤、分组、求和功能示例
2019/06/03 Python
Html5 canvas实现粒子时钟的示例代码
2018/09/06 HTML / CSS
房地产出纳岗位职责
2013/12/01 职场文书
趣味活动策划方案
2014/02/08 职场文书
学校文明单位申报材料
2014/05/06 职场文书
村容村貌整治方案
2014/05/21 职场文书
2014年餐厅服务员工作总结
2014/11/18 职场文书
关于童年的读书笔记
2015/06/26 职场文书
Vue OpenLayer 为地图绘制风场效果
2022/04/24 Vue.js
Python docx库删除复制paragraph及行高设置图片插入示例
2022/07/23 Python