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 中{},[]中括号,大括号使用详解
May 12 Javascript
jQuery中的.bind()、.live()和.delegate()之间区别分析
Jun 08 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
Jul 04 Javascript
node.js中的favicon.ico请求问题处理
Dec 15 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
May 17 Javascript
JS基于构造函数实现的菜单滑动显隐效果【测试可用】
Jun 21 Javascript
jQuery表单元素选择器代码实例
Feb 06 Javascript
详解自定义ajax支持跨域组件封装
Feb 08 Javascript
javascript实现鼠标点击生成文字特效
Dec 24 Javascript
微信小程序实现多图上传
Jun 19 Javascript
快速解决Vue、element-ui的resetFields()方法重置表单无效的问题
Aug 12 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
优化使用mysql存储session的php代码
2008/01/10 PHP
强烈声明: 不要使用(include/require)_once
2013/06/06 PHP
thinkphp的CURD和查询方式介绍
2013/12/19 PHP
推荐10个提供免费PHP脚本下载的网站
2014/12/31 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
经典海量jQuery插件 大家可以收藏一下
2010/02/07 Javascript
js操作iframe的一些方法介绍
2013/06/25 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
js字母大小写转换实现方法总结
2013/11/13 Javascript
javascript中的undefined和not defined区别示例介绍
2014/02/26 Javascript
ExtJS4如何自动生成控制grid的列显示、隐藏的checkbox
2014/05/02 Javascript
生成二维码方法汇总
2014/12/26 Javascript
jQuery实现的超酷苹果风格图标滑出菜单效果代码
2015/09/16 Javascript
jQuery实现多级联动下拉列表查询框
2016/01/18 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
AngularJS实现ajax请求的方法
2016/11/22 Javascript
纯js实现隔行变色效果
2017/11/29 Javascript
Webpack框架核心概念(知识点整理)
2017/12/22 Javascript
浅谈FastClick 填坑及源码解析
2018/03/02 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
JavaScript图像放大镜效果实现方法详解
2020/06/28 Javascript
js实现鼠标滑动到某个div禁止滚动
2020/09/17 Javascript
Vue中使用wangeditor富文本编辑的问题
2021/02/07 Vue.js
python通过pil将图片转换成黑白效果的方法
2015/03/16 Python
在Python程序中操作MySQL的基本方法
2015/07/29 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python3安装Scrapy的方法步骤
2017/11/23 Python
Python和Java的语法对比分析语法简洁上python的确完美胜出
2019/05/10 Python
Python3和PyCharm安装与环境配置【图文教程】
2020/02/14 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
HTML5中canvas中的beginPath()和closePath()的重要性
2018/08/24 HTML / CSS
定制别致的瑜伽垫:Sugarmat
2019/06/21 全球购物
结婚典礼证婚词
2014/01/11 职场文书
青年联谊会致辞
2015/07/31 职场文书
导游词之泉州崇武古城
2019/12/20 职场文书
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫