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代码
Dec 26 Javascript
js过滤HTML标签以及空格的思路及代码
May 24 Javascript
javascript 处理null及null值示例
Jun 09 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
jquery实现炫酷的叠加层自动切换特效
Feb 01 Javascript
Bootstrap table分页问题汇总
May 30 Javascript
总结AngularJS开发者最常犯的十个错误
Aug 31 Javascript
微信小程序开发实现消息推送
Nov 18 Javascript
微信小程序webview组件交互,内联h5页面并网页实现微信支付实现解析
Aug 16 Javascript
layui 实现表格某一列显示图标
Sep 19 Javascript
Vuex modules模式下mapState/mapMutations的操作实例
Oct 17 Javascript
JavaScript运行机制实例分析
Apr 11 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 mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
smarty表格换行实例
2014/12/15 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
js读取本地excel文档数据的代码
2010/11/11 Javascript
JavaScript中的console.profile()函数详细介绍
2014/12/29 Javascript
JQuery动画与特效实例分析
2015/02/02 Javascript
在JavaScript中处理字符串之fontcolor()方法的使用
2015/06/08 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
2016/01/12 Javascript
JavaScript function函数种类详解
2016/02/22 Javascript
vue实现可增删查改的成绩单
2016/10/27 Javascript
懒加载实现的分页&&网站footer自适应
2016/12/21 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
web前端vue之vuex单独一文件使用方式实例详解
2018/01/11 Javascript
详解Angular调试技巧之报错404(not found)
2018/01/31 Javascript
Vuex 在Vue 组件中获得Vuex 状态state的方法
2018/08/27 Javascript
深入理解es6块级作用域的使用
2019/03/28 Javascript
python使用心得之获得github代码库列表
2014/06/25 Python
python如何查看系统网络流量的信息
2016/09/12 Python
Python守护线程用法实例
2017/06/23 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
opencv 获取rtsp流媒体视频的实现方法
2019/08/23 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python中的逆序遍历实例
2019/12/25 Python
canvas实现高阶贝塞尔曲线(N阶贝塞尔曲线生成器)
2018/01/10 HTML / CSS
美国设计师精美珠宝购物网:Netaya
2016/08/28 全球购物
美国美发品牌:Bumble and Bumble
2016/10/08 全球购物
电大会计学自我鉴定
2014/02/06 职场文书
专科应届毕业生求职信
2014/06/04 职场文书
房屋租赁合同协议书范本
2014/10/19 职场文书
四风问题原因分析及整改措施
2014/10/24 职场文书
公司费用报销管理制度
2015/08/04 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL
使用Nginx的访问日志统计PV与UV
2022/05/06 Servers