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 相关文章推荐
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
jQuery$命名冲突怎么办如何解决
Jan 16 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
js实现图片漂浮效果的方法
Mar 02 Javascript
JavaScript 事件对象介绍
Apr 13 Javascript
详谈jQuery.load()和Jsp的include的区别
Apr 12 jQuery
JS轮播图实现简单代码
Feb 19 Javascript
JavaScript实现图片本地预览功能【不用上传至服务器】
Sep 20 Javascript
React学习之事件绑定的几种方法对比
Sep 24 Javascript
小程序采集录音并上传到后台
Nov 22 Javascript
Javascript实现打鼓效果
Jan 29 Javascript
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
php 向访客和爬虫显示不同的内容
2009/11/09 PHP
让PHP支持断点续传的源码
2010/05/16 PHP
php反射学习之不用new方法实例化类操作示例
2019/06/14 PHP
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
2011/09/13 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
JavaScript实现简单的日历效果
2016/09/25 Javascript
微信小程序使用第三方库Underscore.js步骤详解
2016/09/27 Javascript
URL的参数中有加号传值变为空格的问题(URL特殊字符)
2016/11/04 Javascript
一个非常好用的文字滚动的案例,鼠标悬浮可暂停[两种方案任选]
2016/12/01 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
2016/12/06 Javascript
BootStrap 获得轮播中的索引和当前活动的焦点对象
2017/05/11 Javascript
NodeJS 中Stream 的基本使用
2018/07/30 NodeJs
vue cli使用融云实现聊天功能的实例代码
2019/04/19 Javascript
详解element-ui级联菜单(城市三级联动菜单)和回显问题
2019/10/02 Javascript
详解微信小程序之提高应用速度小技巧
2020/01/07 Javascript
python利用thrift服务读取hbase数据的方法
2018/12/27 Python
利用Python正则表达式过滤敏感词的方法
2019/01/21 Python
python3 json数据格式的转换(dumps/loads的使用、dict to str/str to dict、json字符串/字典的相互转换)
2019/04/01 Python
python实现随机漫步方法和原理
2019/06/10 Python
Python如何调用JS文件中的函数
2019/08/16 Python
python是怎么被发明的
2020/06/15 Python
python的scipy.stats模块中正态分布常用函数总结
2021/02/19 Python
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
Java程序员综合测试题
2014/04/25 面试题
秋季运动会加油稿200字
2014/01/11 职场文书
餐厅经理岗位职责和岗位目标
2014/02/13 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
学校开学标语
2014/10/06 职场文书
孕妇离婚协议书范本
2014/11/20 职场文书
2015个人半年总结范文
2015/03/09 职场文书
手术室消毒隔离制度
2015/08/05 职场文书
2016年小学“我们的节日·中秋节”活动总结
2016/04/05 职场文书
pycharm2021激活码使用教程(永久激活亲测可用)
2021/03/30 Python
在Java中Collection的一些常用方法总结
2021/06/13 Java/Android
Java处理延时任务的常用几种解决方案
2022/06/01 Java/Android