jQuery学习5 jQuery事件模型

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 Event学习第四章传统的事件注册模型

在最古老的JavaScript浏览器里注册事件只能通过内联模式。自从DHTML从根本上改变了你操作页面的方法，事件的注册就必须有扩展性而且要有很强的适应性。所以就必须有相应的事件模型。Netscape在第三代浏览器中就开始>>>详细阅读

本文标题：jQuery学习5 jQuery事件模型

地址：http://www.17bianji.com/kaifa2/JS/27112.html

1/2 1