您当前位置：首页 > web前端 > jquery > jQuery学习5：jQuery事件模型

jQuery学习5：jQuery事件模型

来源：程序员人生发布时间：2014-05-06 16:38:48 阅读次数：3842次

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="http://www.wfuyu.com/uploads/Common/jquery-1.3.2.min.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="http://www.wfuyu.com/liehuo.net/images/liehuo2009/logo.gif"/><div id="console"></div></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

删除事件处理程序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 - Liehuo.Net</title><script type="text/javascript" src="http://www.wfuyu.com/uploads/Common/jquery-1.3.2.min.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="http://www.wfuyu.com/liehuo.net/images/liehuo2009/logo.gif"/></body></html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

在元素上方悬停鼠标指针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="http://www.wfuyu.com/uploads/Common/jquery-1.3.2.min.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><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.wfuyu.com/' target='_blank'>http://www.wfuyu.com/</a></center>
提示：可修改后代码再运行!

作者博客：http://www.cnblogs.com/yangzhijia/

文章导读：

jQuery学习1：认识和了解jQuery库

jQuery学习2：选择器的使用

jQuery学习3：操作元素属性和特性

jQuery学习4：浏览器的事件模型

生活不易，码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生