jQuery学习5 jQuery事件模型


Posted in Javascript onFebruary 07, 2010

jQuery事件模型的功能有:
提供建立事件处理程序的统一方法;
允许在每个元素上为每个时间类型建立多个处理程序;
采用标准的事件类型名称,例如click或mouseover;
使用Event实例可用作处理程序的参数;
对Event实例的最常用的属性进行规范化;
为取消事件和阻塞默认操作提供统一方法。
jQuery绑定事件处理程序:
bind()命令
$('img').bind('click',funciton(event){alert('Hi there');}); 该语句为页面上的图片绑定已提供的内联函数,作为点击事件处理程序。

建立事件处理程序,无需浏览器特定代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>jQuery Events Example</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
$('#vstar') 
.bind('click',function(event) { 
say('Whee once!'); 
}) 
.bind('click',function(event) { 
say('Whee twice!'); 
}) 
.bind('click',function(event) { 
say('Whee three times!'); 
}); 
}); 
function say(text) { 
$('#console').append('<div>'+text+'</div>'); 
} 
</script> 
</head> 
<body> 
<img id="vstar" src="vstar.jpg"/> 
<div id="console"></div> 
</body> 
</html>

删除事件处理程序unbind(event,listener),unbind(event)
从包装集的所有元素中删除可选的已传递参数所指定的事件处理程序。如果不提供参数,则从元素中删除所有的监听器(即事件处理程序)
起切换作用的监听器toggle()
toggle(listenerOdd,listenerEven)把已传递函数建立为包装集所有元素的一对click事件处理程序,每当触发click事件就相互切换。
每当点击事件发生时,调用互补的监听器

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>jQuery Toggle Command Example</title> 
<script type="text/javascript" src="../scripts/jquery-1.2.1.js"> 
</script> 
<script type="text/javascript"> 
$(function(){ 
$('#vstar').toggle( 
function(event) { 
$(event.target).css('opacity',0.4); 
}, 
function(event) { 
$(event.target).css('opacity',1.0); 
} 
); 
}); 
</script> 
</head> 
<body> 
<img id="vstar" src="vstar.jpg"/> 
</body> 
</html>

在元素上方悬停鼠标指针hover(overListener,outListener)建立已匹配元素的mouseover和mouseout事件处理程序。这些处理程序当儿仅当元素所覆盖区域被进入和退出时触发,忽视鼠标指针从父元素到子元素上的迁移

鼠标停留事件

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Hover example</title> 
<link rel="stylesheet" type="text/css" href="hover.css"> 
<script type="text/javascript" 
src="../scripts/jquery-1.2.1.js"></script> 
<script type="text/javascript"> 
function report(event) { 
$('#console').append('<div>'+event.type+'</div>'); 
} 
$(function(){ 
$('#outer1') 
.bind('mouseover',report) 
.bind('mouseout',report); 
$('#outer2').hover(report,report); 
}); 
</script> 
</head> 
<body> 
<div class="outer" id="outer1"> 
Outer 1 
<div class="inner" id="inner1">Inner 1</div> 
</div> 
<div class="outer" id="outer2"> 
Outer 2 
<div class="inner" id="inner2">Inner 2</div> 
</div> 
<div id="console"></div> 
</body> 
</html>
Javascript 相关文章推荐
window.open的功能全解析
Oct 10 Javascript
小议javascript 设计模式 推荐
Oct 28 Javascript
js实现省市联动效果的简单实例
Feb 10 Javascript
JS控制一个DIV层在指定时间内消失的方法
Feb 17 Javascript
JavaScript截取字符串的Slice、Substring、Substr函数详解和比较
Mar 20 Javascript
node.js中的console.log方法使用说明
Dec 09 Javascript
JavaScript面向对象的实现方法小结
Apr 14 Javascript
Bootstrap每天必学之面板
Nov 30 Javascript
AngularJs Javascript MVC 框架
Jun 20 Javascript
微信js-sdk界面操作接口用法示例
Oct 12 Javascript
原生JS实现跑马灯效果
Feb 20 Javascript
vue首次渲染全过程
Apr 21 Vue.js
jQuery学习4 浏览器的事件模型
Feb 07 #Javascript
jQuery学习3:操作元素属性和特性
Feb 07 #Javascript
jQuery学习2 选择器的使用说明
Feb 07 #Javascript
jQuery ctrl+Enter shift+Enter实现代码
Feb 07 #Javascript
JQuery 获取和设置Select选项的代码
Feb 07 #Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 #Javascript
jQuery AnythingSlider滑动效果插件
Feb 07 #Javascript
You might like
Search File Contents PHP 搜索目录文本内容的代码
2010/02/21 PHP
PHP获取当前页面完整URL的实现代码
2013/06/10 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
laravel自定义分页效果
2017/07/23 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
nodejs读取memcache示例分享
2014/01/02 NodeJs
jQuery实现隔行背景色变色
2014/11/24 Javascript
详解JavaScript中getFullYear()方法的使用
2015/06/10 Javascript
Javascript中setTimeOut和setInterval的定时器用法
2015/06/12 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
微信小程序-拍照或选择图片并上传文件
2017/01/06 Javascript
vue上传图片组件编写代码
2017/07/26 Javascript
Cropper.js 实现裁剪图片并上传(PC端)
2017/08/20 Javascript
详解Webpack loader 之 file-loader
2018/11/07 Javascript
详解ES6中的Map与Set集合
2019/03/22 Javascript
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
Vue的全局过滤器和私有过滤器的实现
2020/04/20 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[31:00]2014 DOTA2华西杯精英邀请赛5 24 NewBee VS iG
2014/05/25 DOTA
[58:46]OG vs NAVI 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python 提取文件的小程序
2009/07/29 Python
Python实现在线程里运行scrapy的方法
2015/04/07 Python
记一次python 内存泄漏问题及解决过程
2018/11/29 Python
Python把对应格式的csv文件转换成字典类型存储脚本的方法
2019/02/12 Python
python图片合成的示例
2020/11/09 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
德国EGOIST网店:销售畅销的设计师品牌
2017/04/18 全球购物
德国自行车商店:Tretwerk
2019/06/21 全球购物
英国家居装饰品、户外家具和玻璃器皿购物网站:Rinkit.com
2019/11/04 全球购物
幼儿园校车司机的岗位职责
2014/01/30 职场文书
自动化专业毕业生求职信
2014/06/18 职场文书
如何书写授权委托书?
2019/06/25 职场文书
Feign调用全局异常处理解决方案
2021/06/24 Java/Android
十大最强妖精系宝可梦,哲尔尼亚斯实力最强,第五被称为大力士
2022/03/18 日漫
JavaScript设计模式之原型模式详情
2022/06/21 Javascript