jquery之jquery事件处理模型(利用jquery绑定事件处理程序)
----------
利用jquery事件模型,凭借bind()命令可以在DOM元素上建立事件处理程序,考虑以下简单示例:
这个语句为页面上的各图像绑定已提供的内联函数,作为点击事件处理程序。
bind()语法:
bind(eventType,data,listener)
在匹配集的所有元素上建立函数,作为指定事件类型的事件处理程序
参数
eventType (字符串)为将要建立的处理程序指定事件类型的名称。这个事件类型可以添加命名空间的后缀,后缀和事件名称之间以圆点分隔。
data (对象)调用者提供的数据,作为属性data附加到Event实例,可供事件处理函数使用。如果省略,事件处理函数就被指定为第2个参数。
listener (函数)将被建立为事件处理程序的函数
返回
包装集
实例:
jquery链允许在单个语句里应用多个命令---各bind()命令在元素上分别建立click事件处理程序。
另一个jquery提供的事件处理的小附赠品是,通过指派命名空间而使事件处理程序分组的能力。不同于指派命名空间的常规方式(通过前缀指派命名空间),这是通过在事件名称后面添加以圆点分隔的后缀来为事件名称指派命名空间。通过这种方式使事件绑定分组,随后可以作为一个单元在它们上面进行简便的操作。
举个例子,页面拥有两个模式,显示模式和编辑模式。牌编辑模式时,事件监听器放在许多页面元素上,但这些监听器并不适合显示模式,因此页面从编辑模式迁出时必须删除。可以利用如下代码给编辑模式的事件指派命名空间:
通过把所有这些绑定分组到editMode命名空间,随后我们可以把它们当作一个单元进行操作,例如,当页面离开编辑模式时应该删除所有的绑定,可以利用如下代码轻松实现:
这将从页面上的所有元素里删除editMode命名空间里的所有click绑定。
===
除bind()命令以外,jquery还提供了20个快捷命令用来建立特定的事件处理程序。因为除方法名称以外每个命令语法都一样,所以为了节省空间,我们在如下单个语法描述框内呈现所有这些命令。
语法:
eventTypeName(listener)
建立已指定的函数,作为与方法同名的事件类型的事件处理程序,支持如下命令:
blur focus mousedown resize
change keydown mouseove scroll
click keypress mouseout select
dblclick keyup mouseover submit
error load mouseup unload
请注意,当利用这些快捷方法时,无法指定将要存储在event.data属性里的data值
参数
listener (函数)作为事件处理程序的函数
返回
包装集
===
jquery也提供bind()命令的特殊版本,命名为one(),建立一次性的事件处理程序。事件处理程序执行第一次后,就作为事件处理程序而自动删除。
one()语法:
one(eventType,data,listener)
在匹配集的所有元素上建立作为指定事件类型的事件处理程序的函数,一旦执行,处理程序就被自动删除
参数
eventType (字符串)为将要建立的处理程序指定事件类型的名称
data (对象)调用者提供的数据,作为名叫data的属性附加到Event实例,可供事件处理函数使用。如果省略,
事件处理函数就被指定为第2个参数。
listener (函数)将被建立为事件处理程序的函数
返回
包装集