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 animate 动画效果使用说明
Nov 04 Javascript
javascript for循环设法提高性能
Feb 24 Javascript
jQuery用unbind方法去掉hover事件及其他方法介绍
Mar 18 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
jQuery处理json数据返回数组和输出的方法
Mar 11 Javascript
JS版元素周期表实现方法
Aug 05 Javascript
Jquery和Js获得元素标签名称的方法总结
Oct 08 Javascript
详解如何用webpack打包一个网站应用项目
Jul 12 Javascript
详解Angular CLI + Electron 开发环境搭建
Jul 20 Javascript
VUE实现图片验证码功能
Nov 18 Javascript
基于JavaScript获取base64图片大小
Oct 18 Javascript
Node使用Nodemailer发送邮件的方法实现
Feb 24 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
缅甸的咖啡简史
2021/03/04 咖啡文化
php递归遍历多维数组的方法
2015/04/18 PHP
使用JavaScript实现Java的List功能(实例讲解)
2013/11/07 Javascript
js拼接html注意问题示例探讨
2014/07/14 Javascript
jQuery中extend函数的实现原理详解
2015/02/03 Javascript
JavaScript中模拟实现jsonp
2015/06/19 Javascript
jQuery解析json格式数据简单实例
2016/01/22 Javascript
Bootstrap基本插件学习笔记之按钮(21)
2016/12/08 Javascript
无循环 JavaScript(map、reduce、filter和find)
2017/04/08 Javascript
基于axios封装fetch方法及调用实例
2018/02/05 Javascript
微信小程序中实现手指缩放图片的示例代码
2018/03/13 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
2018/10/29 Javascript
使用gulp构建前端自动化的方法示例
2018/12/25 Javascript
微信小程序第三方框架对比 之 wepy / mpvue / taro
2019/04/10 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
python自定义类并使用的方法
2015/05/07 Python
Python中利用sqrt()方法进行平方根计算的教程
2015/05/15 Python
python常用知识梳理(必看篇)
2017/03/23 Python
Python Grid使用和布局详解
2018/06/30 Python
opencv python 傅里叶变换的使用
2018/07/21 Python
python利用ffmpeg进行录制屏幕的方法
2019/01/10 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
Django-Scrapy生成后端json接口的方法示例
2020/10/06 Python
HTML5实现桌面通知 提示功能
2017/10/11 HTML / CSS
潘多拉珠宝英国官方网上商店:PANDORA英国
2018/06/12 全球购物
Servlet面试题库
2015/07/18 面试题
求职简历自荐信
2013/10/20 职场文书
《悯农》教学反思
2014/04/28 职场文书
篮球比赛拉拉队口号
2014/06/10 职场文书
会计专业自荐书
2014/07/08 职场文书
战略合作意向书
2014/07/29 职场文书
anaconda python3.8安装后降级
2021/06/11 Python
利用uni-app生成微信小程序的踩坑记录
2022/04/05 Javascript
Golang 并发编程 SingleFlight模式
2022/04/26 Golang