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日期处理函数
Oct 16 Javascript
javascript时间自动刷新实现原理与步骤
Jan 06 Javascript
JavaScript动态创建div属性和样式示例代码
Oct 09 Javascript
为Javascript中的String对象添加去除左右空格的方法(示例代码)
Nov 30 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
jQuery实现定时读取分析xml文件的方法
Jul 16 Javascript
原生js实现自由拖拽弹窗代码demo
Jun 29 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
微信小程序 switch组件详解及简单实例
Jan 10 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
Apr 25 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
phpBB BBcode处理的漏洞
2006/10/09 PHP
php中看实例学正则表达式
2006/12/25 PHP
php5.3以后的版本连接sqlserver2000的方法
2014/07/28 PHP
php查询操作实现投票功能
2016/05/09 PHP
Apache PHP MySql安装配置图文教程
2016/08/27 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
数组Array进行原型prototype扩展后带来的for in遍历问题
2010/02/07 Javascript
合并table相同单元格的jquery插件分享(很精简)
2011/06/20 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
2013/11/20 Javascript
js检测用户输入密码强度
2015/10/22 Javascript
bootstrap实现弹窗和拖动效果
2016/01/03 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
2016/10/30 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
基于iScroll实现内容滚动效果
2018/03/21 Javascript
浅析Vue.js中v-bind v-model的使用和区别
2018/12/04 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
Python版实现微信公众号扫码登陆
2020/05/28 Javascript
[44:21]Ti4 循环赛第四日 附加赛NEWBEE vs LGD
2014/07/13 DOTA
Python标准库inspect的具体使用方法
2017/12/06 Python
Python3.7 pyodbc完美配置访问access数据库
2019/10/03 Python
python将字符串转变成dict格式的实现
2019/11/18 Python
Django集成celery发送异步邮件实例
2019/12/17 Python
Python导入模块包原理及相关注意事项
2020/03/25 Python
Docker如何部署Python项目的实现详解
2020/10/26 Python
纯css3实现思维导图样式示例
2018/11/01 HTML / CSS
美国在线精品家居网站:Burke Decor
2017/04/12 全球购物
益模软件Java笔试题
2012/03/27 面试题
学生会辞职信
2015/03/02 职场文书
人力资源部工作计划
2019/05/14 职场文书
mysql查询的控制语句图文详解
2021/04/11 MySQL
MySQL学习之基础命令实操总结
2022/03/19 MySQL