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 相关文章推荐
jquery获取tr中控件值并操作tr实现思路
Mar 27 Javascript
jquery animate实现鼠标放上去显示离开隐藏效果
Jul 21 Javascript
js计算两个时间之间天数差的实例代码
Nov 19 Javascript
浅析offsetLeft,Left,clientLeft之间的区别
Nov 30 Javascript
jQuery获取当前点击的对象元素(实现代码)
May 19 Javascript
ionic 自定义弹框效果
Jun 27 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
微信小程序promsie.all和promise顺序执行
Oct 27 Javascript
vue cli 全面解析
Feb 28 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
AjaxFileUpload.js实现异步上传文件功能
Apr 19 Javascript
2019年度web前端面试题总结(主要为Vue面试题)
Jan 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
NOD32 v2.70.32 简体中文封装版 提供下载了
2007/02/27 PHP
Smarty安装配置方法
2008/04/10 PHP
通过PHP简单实例介绍文件上传
2015/12/16 PHP
Laravel5.1数据库连接、创建数据库、创建model及创建控制器的方法
2016/03/29 PHP
PHP面向对象程序设计方法实例详解
2016/12/24 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
js实现页面打印功能实例代码(附去页眉页脚功能代码)
2009/12/15 Javascript
Javascript 中的类和闭包
2010/01/08 Javascript
javaScript如何生成xmlhttp
2013/12/16 Javascript
javascript框架设计之类工厂
2015/06/23 Javascript
Javascript单例模式的介绍和实例
2016/10/08 Javascript
概述jQuery中的ajax方法
2016/12/16 Javascript
基于代数方程库Algebra.js解二元一次方程功能示例
2017/06/09 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
JavaScript遍历查找数组中最大值与最小值的方法示例
2019/05/24 Javascript
泛谈JS逻辑判断选择器 || &&
2019/05/24 Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
2019/06/27 Javascript
Javascript原生ajax请求代码实例
2020/02/20 Javascript
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python如何为图片添加水印
2016/11/25 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
python实现随机漫步算法
2018/08/27 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
python爬虫学习笔记之pyquery模块基本用法详解
2020/04/09 Python
编译 pycaffe时报错:fatal error: numpy/arrayobject.h没有那个文件或目录
2020/11/29 Python
phpquery中文手册
2021/03/18 PHP
销售类个人求职信范文
2013/09/25 职场文书
员工晚婚的请假条
2014/02/08 职场文书
学校联谊协议书
2014/09/16 职场文书
2014医学院领导干部四风对照检查材料思想汇报
2014/09/16 职场文书
2014年局领导班子自身建设情况汇报
2014/11/21 职场文书
女方家长婚礼致辞
2015/07/27 职场文书
Java中的随机数Random
2022/03/17 Java/Android
vue elementUI表格控制对应列
2022/04/13 Vue.js
Hive HQL支持2种查询语句风格
2022/06/25 数据库