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 arguments对象应用介绍
Nov 28 Javascript
Javascript 遍历页面text控件详解
Jan 06 Javascript
js网页滚动条滚动事件实例分析
May 05 Javascript
微信内置浏览器私有接口WeixinJSBridge介绍
May 25 Javascript
简单理解Vue条件渲染
Dec 03 Javascript
jquery自定义插件结合baiduTemplate.js实现异步刷新(附源码)
Dec 22 Javascript
详解Vue 多级组件透传新方法provide/inject
May 09 Javascript
详解easyui 切换主题皮肤
Apr 04 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
Moment.js实现多个同时倒计时
Aug 26 Javascript
angular异步验证防抖踩坑实录
Dec 01 Javascript
JS正则表达式验证端口范围(0-65535)
Jan 06 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实现天干地支计算器示例
2014/03/14 PHP
setTimeout 不断吐食CPU的问题分析
2009/04/01 Javascript
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
javascript cookies 设置、读取、删除实例代码
2010/04/12 Javascript
javascript 事件绑定问题
2011/01/01 Javascript
用原生JavaScript实现jQuery的$.getJSON的解决方法
2013/05/03 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
2013/08/12 Javascript
Jquery节点遍历next与nextAll方法使用示例
2014/07/22 Javascript
基于iscroll.js实现下拉刷新和上拉加载效果
2016/11/28 Javascript
jQuery中table数据的值拷贝和拆分
2017/03/19 Javascript
微信小程序request出现400的问题解决办法
2017/05/23 Javascript
深入理解基于vue-cli的vuex配置
2017/07/24 Javascript
浅谈 vue 中的 watcher
2017/12/04 Javascript
vue 监听键盘回车事件详解 @keyup.enter || @keyup.enter.native
2018/08/25 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
Centos7 安装Node.js10以上版本的方法步骤
2019/10/15 Javascript
js中关于Blob对象的介绍与使用
2019/11/29 Javascript
vue el-table实现自定义表头
2019/12/11 Javascript
Element-UI+Vue模式使用总结
2020/01/02 Javascript
Openlayers实现点闪烁扩散效果
2020/09/24 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
node使用async_hooks模块进行请求追踪
2021/01/28 Javascript
[02:57]DOTA2亚洲邀请赛小组赛第四日 赛事回顾
2015/02/02 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
详解Python自建logging模块
2018/01/29 Python
Python pyinotify日志监控系统处理日志的方法
2018/03/08 Python
Python实现字符串的逆序 C++字符串逆序算法
2020/05/28 Python
python中的json总结
2018/10/11 Python
Python测试Kafka集群(pykafka)实例
2019/12/23 Python
python tqdm库的使用
2020/11/30 Python
Pytorch模型迁移和迁移学习,导入部分模型参数的操作
2021/03/03 Python
10个很棒的 CSS3 开发工具 推荐
2011/05/16 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
公司团队口号霸气押韵
2015/12/24 职场文书
解决Jenkins集成SonarQube遇到的报错问题
2021/07/15 Java/Android
python_tkinter事件类型详情
2022/03/20 Python