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 相关文章推荐
QQ邮箱的一个文本编辑器代码
Mar 14 Javascript
javascript 星级评分效果(手写)
Dec 24 Javascript
js获取url参数值的两种方式
Sep 10 Javascript
利用javascript打开模态对话框(示例代码)
Jan 11 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
jQuery的ajax下载blob文件
Jul 21 Javascript
AngularJS基础 ng-dblclick 指令用法
Aug 01 Javascript
作为老司机使用 React 总结的 11 个经验教训
Apr 08 Javascript
JavaScript闭包的简单应用
Sep 01 Javascript
vue父组件向子组件动态传值的两种方法
Nov 11 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
Jun 27 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 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
一个ORACLE分页程序,挺实用的.
2006/10/09 PHP
一个高ai的分页函数和一个url函数
2006/10/09 PHP
php实现图片添加水印功能
2014/02/13 PHP
php跨域cookie共享使用方法
2014/02/20 PHP
php两种无限分类方法实例
2015/04/21 PHP
PHP实现带进度条的Ajax文件上传功能示例
2019/07/02 PHP
js判断IE浏览器版本过低示例代码
2013/11/22 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
使用jQuery和Bootstrap实现多层、自适应模态窗口
2014/12/22 Javascript
使用jquery动态加载js文件的方法
2014/12/24 Javascript
基于jQuery实现的扇形定时器附源码下载
2015/10/20 Javascript
js仿淘宝和百度文库的评分功能
2016/05/15 Javascript
vue.js实现仿原生ios时间选择组件实例代码
2016/12/21 Javascript
js实现可输入可选择的select下拉框
2016/12/21 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
Vue实现搜索 和新闻列表功能简单范例
2018/03/16 Javascript
js实现移动端轮播图
2020/12/21 Javascript
Nuxt 项目性能优化调研分析
2020/11/07 Javascript
为什么JavaScript中0.1 + 0.2 != 0.3
2020/12/03 Javascript
python绘图库Matplotlib的安装
2014/07/03 Python
Django中实现一个高性能计数器(Counter)实例
2014/07/09 Python
深入理解Python中各种方法的运作原理
2015/06/15 Python
详解Python中dict与set的使用
2015/08/10 Python
Python实现快速排序算法及去重的快速排序的简单示例
2016/06/26 Python
对Python中gensim库word2vec的使用详解
2018/05/08 Python
python psutil模块使用方法解析
2019/08/01 Python
wxPython实现文本框基础组件
2019/11/18 Python
Django 如何使用日期时间选择器规范用户的时间输入示例代码详解
2020/05/22 Python
Python爬虫分析微博热搜关键词的实现代码
2021/02/22 Python
香港士多网上超级市场:Ztore
2021/01/09 全球购物
长辈证婚人证婚词
2014/01/09 职场文书
学生未请假就回家检讨书
2014/09/22 职场文书
单位推荐信范文
2015/03/27 职场文书
培训督导岗位职责
2015/04/10 职场文书
Python的这些库,你知道多少?
2021/06/09 Python
SpringCloud中分析讲解Feign组件添加请求头有哪些坑梳理
2022/06/21 Java/Android