jquery之jquery事件处理模型(利用jquery绑定事件处理程序)

最新推荐文章于 2020-05-05 10:11:23 发布

fhd001

最新推荐文章于 2020-05-05 10:11:23 发布

阅读量1k

点赞数

分类专栏： jquery 文章标签： jquery function events div html 存储

本文链接：https://blog.csdn.net/fhd001/article/details/6312042

版权

jquery 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

jquery之jquery事件处理模型(利用jquery绑定事件处理程序)

----------

利用jquery事件模型，凭借bind()命令可以在DOM元素上建立事件处理程序，考虑以下简单示例：

$('img').bind('click',function(event){alert('Hi there!');});

这个语句为页面上的各图像绑定已提供的内联函数，作为点击事件处理程序。

bind()语法：

bind(eventType,data,listener)

在匹配集的所有元素上建立函数，作为指定事件类型的事件处理程序

参数

eventType (字符串)为将要建立的处理程序指定事件类型的名称。这个事件类型可以添加命名空间的后缀，后缀和事件名称之间以圆点分隔。

data (对象)调用者提供的数据，作为属性data附加到Event实例，可供事件处理函数使用。如果省略，事件处理函数就被指定为第2个参数。

listener (函数)将被建立为事件处理程序的函数

包装集

实例：

<html> <head> <title>DOM Level 2 Events Example</title> <mce:script type="text/javascript" src="../scripts/jquery-1.2.1.js" mce_src="scripts/jquery-1.2.1.js"></mce:script> <mce:script type="text/javascript"></mce:script> </head> <body> <img id="vstar" src="vstar.jpg" mce_src="vstar.jpg"/> <div id="console"></div> </body> </html>

jquery链允许在单个语句里应用多个命令---各bind()命令在元素上分别建立click事件处理程序。

另一个jquery提供的事件处理的小附赠品是，通过指派命名空间而使事件处理程序分组的能力。不同于指派命名空间的常规方式(通过前缀指派命名空间)，这是通过在事件名称后面添加以圆点分隔的后缀来为事件名称指派命名空间。通过这种方式使事件绑定分组，随后可以作为一个单元在它们上面进行简便的操作。

举个例子，页面拥有两个模式，显示模式和编辑模式。牌编辑模式时，事件监听器放在许多页面元素上，但这些监听器并不适合显示模式，因此页面从编辑模式迁出时必须删除。可以利用如下代码给编辑模式的事件指派命名空间：

$('#thing1').bind('click.editMode',someListener); $('#thing2').bind('click.editMode',someOtherListener); ... $('#thingN').bind('click.editMode',stillAnotherListener);

通过把所有这些绑定分组到editMode命名空间，随后我们可以把它们当作一个单元进行操作，例如，当页面离开编辑模式时应该删除所有的绑定，可以利用如下代码轻松实现：

$('*').unbind('click.editMode');

这将从页面上的所有元素里删除editMode命名空间里的所有click绑定。

===

除bind()命令以外，jquery还提供了20个快捷命令用来建立特定的事件处理程序。因为除方法名称以外每个命令语法都一样，所以为了节省空间，我们在如下单个语法描述框内呈现所有这些命令。

语法：

eventTypeName(listener)

建立已指定的函数，作为与方法同名的事件类型的事件处理程序，支持如下命令：

blur focus mousedown resize

change keydown mouseove scroll

click keypress mouseout select

dblclick keyup mouseover submit