`
zccst
  • 浏览: 3315999 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

prototype事件监听方法

 
阅读更多
observe
Event.observe(element, eventName, handler[, useCapture = false])
在 DOM 元素上注册事件处理程序。
重要提示
首先,如果你曾经使用过 HTML 事件属性(如 <body onload="return myFunction()">)或 DOM Level-0 的事件属性(如 window.onload = myFunction;),你一定要忘记那些糟糕的做法,然后了解 observe 是怎么做的。

对于那些相同的元素事件(element+event)组合,它并不会替换已经存在的事件处理程序,而是将新的处理程序增加到元素事件组合的 处理程序列表 中。使用 observe 再也不会影响到先前已有的事件处理程序调用了。

参数说明
对于希望增加事件处理的 DOM 元素:按照 Prototype 的一贯原则,可以使用一个真实的 DOM 节点引用,也可以使用元素的 ID 字符串。
根据浏览器所支持的 DOM 级别(通常支持 DOM Level 2 事件,详细的事件名称及细节请查看 1.6 节),采用相应的标准化的事件名称。这就像 'click' 一样简单易用。
事件处理函数可以是一个匿名函数、一个普通的函数或是一个 作为事件侦听器的绑定函数,这取决于你。
可选的,可以使用 捕获(capturing)来阻止事件 冒泡(bubbling),关于这两个概念,DOM 规范中有详细的描述。注意 捕获 在个别主流的浏览器上并不支持,但是这个参数也很少会用到。通常情况下, 根本不需要使用这个参数。
经常忘记的一个前提条件…
为注册函数作为事件处理程序,相关的 DOM 元素必须已经存在于 DOM 树中(换句话说,该元素必须出现在 HTML 源代码中,或者在注册事件处理程序的代码运行前,已动态的创建和插入到 DOM 中)。

一个简单的样例
假设有以下 (X)HTML 片断:

<form id="signinForm" method="post" action="/auth/signin">… </form>
下面的代码描述了如何在表单提交事件上注册函数 checkForm:

Event.observe('signinForm', 'submit', checkForm);
当然,你会希望这行代码运行时,表单已存在于 DOM 中。但是在文档 <head> 以外的地方放置一对 <script> 标签实在有碍观瞻,因此请使用一种简单的方式来代替——在页面完全载入后再加载处理程序:

Event.observe(window, 'load', function() {
Event.observe('signinForm', 'submit', checkForm);
});
只增加了一点点封装…

注意,如果页面非常大,你可能希望在页面未完全载入前就运行这段代码(只需等待相应的 DOM 节点载入)。目前没有标准的事件支持这样做, 但是这篇文章指出了一些有用的方法。

需要使用 this 引用的复杂情形
当你的事件处理程序作为函数参数传递时,会失去事件处理函数的 绑定。也就是说,会失去原始的事件处理函数中 this 所指向的对象。如果你所传递的方法需要使用 this 引用(例如访问 this 所表示的容器对象中的字段),这会有一些麻烦。

为解决这个问题,Prototype 专门提供了一个 bindAsEventListener 方法, 如果你以前未曾见过,请查阅相关的文档。该方法的使用非常简单:

var Checks = {
// 我们的 'generic' 函数所需的一些信息
generic: function(event) {
// 表单校验逻辑(例如非空字段校验)
}
};

Event.observe('signinForm', 'submit', Checks.generic.bindAsEventListener(Checks));
分享到:
评论

相关推荐

    cocos creator为事件加上监听的两种处理方式

    在组件不再需要监听事件时,通常会在`onDisable`或`onDestroy`函数中调用`off`方法来移除监听器,以避免内存泄漏。 ### 2. `cc.EventTarget.addListener` 方法 另一种事件监听的方法是使用`cc.EventTarget....

    Prototype框架常用方法简介

    Prototype框架是JavaScript中一个强大的库,它为JavaScript开发提供了许多便利的功能,特别是在对象原型扩展、事件处理、Ajax交互等方面。本文将详细介绍Prototype框架中的几个常用方法,并通过实例进行解析。 1. *...

    prototype中文帮助文档

    例如,你可以使用`observe`方法添加事件监听器,使用`stopObserving`移除它们。 在Ajax方面,Prototype.js 提供了一个全面的解决方案。它封装了XMLHttpRequest对象,创建了`Ajax`模块,包含了`Request`、`Form`、`...

    prototype 1.3 源码解读

    - **`Function.prototype.bindAsEventListener`**:该方法与 `bind` 类似,但特别用于事件监听器。它确保事件处理器的 `this` 上下文正确设置,并且能够处理跨浏览器的问题(如 IE 中 `event` 对象的访问)。 #### ...

    prototype_PrototypeJS1.6_

    4. **事件处理**:PrototypeJS改进了JavaScript的事件处理机制,允许事件监听器的链式添加和移除,以及事件传播的阻止和冒泡控制。 5. **JSON支持**:1.6版本可能包含了对JSON(JavaScript Object Notation)的支持...

    prototype开发者手册(中文版)+prototype.js

    在事件处理方面,Prototype提供了一种统一的方式来绑定和解绑事件监听器,避免了传统JavaScript中跨浏览器事件处理的不一致问题。`Event.observe`和`Event.stopObserving`是两个关键的函数,它们分别用于添加和移除...

    prototype.js javaScript插件

    - **事件委托**:Prototype.js支持事件委托,允许在一个元素上监听事件,然后根据事件源决定如何处理。这提高了性能,减少了内存占用,因为只需要为最外层元素添加一个事件处理器。 - **事件监听器**:`observe`和`...

    prototype-1.4.0源码解读.js

    Prototype 对事件处理进行了封装,简化了事件监听和触发。`Event.observe`用于添加事件监听器,`Event.stop`可以阻止事件的默认行为,`Event.stopObserving`则用于移除事件监听。这些方法使得处理用户交互更加灵活...

    非常有用的prototype实例

    这通常涉及到跨窗口通信和事件监听。例如,我们可以在子窗口的`window`对象上定义一个`close`方法,并通过`prototype`将此方法添加到`Window`构造函数: ```javascript Window.prototype.closeAndRefreshParent = ...

    prototype

    2. **事件处理(Event Handling)**:简化了事件监听和处理,支持跨浏览器的事件模型。 3. **Ajax(Asynchronous JavaScript and XML)**:提供了易于使用的Ajax功能,使得与服务器进行异步通信变得更加简单。 4. **...

    prototype帮助中文文档

    在这一版本中,开发者可以找到诸如 `Event.observe` 用于事件监听,`Function.bind` 用于绑定函数上下文等经典功能。不过,需要注意的是,较新的Web应用可能需要使用更新版本的Prototype,以便获得更好的浏览器兼容...

    Prototype中文帮助文档

    同时,它还提供了`document.observe()`和`document.stopObserving()`用于事件监听和取消监听,以提高性能。 ### 8. `Prototype.chm`文件 提供的`Prototype.chm`文件是Prototype的帮助文档,通常包含详细的技术指南...

    prototype 开发应用手册,笔记,prototype.js文件下载

    2. Delegation(委托):Prototype的`Event.observe()`方法可以实现事件委托,监听父元素上的事件,处理子元素的行为,减少事件监听器的数量,提高性能。 五、Function增强 1. Function.prototype.bind:这个方法...

    prototype从入门到精通

    1. **事件处理**:Prototype封装了事件处理,通过`Event.observe()`和`Event.stop()`等方法,使得事件监听和阻止事件默认行为更加便捷。 2. **Ajax组件**:Prototype提供了一些内置的Ajax组件,如Autocompleter...

    基于prototype制作的幻灯片

    2. **事件监听与处理**:Prototype.js的Event模块提供了丰富的事件处理功能,如`observe`用于添加事件监听,`stopObserving`用于移除监听。在幻灯片中,我们可能需要监听用户点击按钮或者自动轮播时的滑动事件。 3....

    Prototype1.5.1使用手册

    3.Event.observe:用于绑定事件监听器,可以替代原生的addEventListener。 三、Ajax 1.Ajax.Request:创建并发送Ajax请求,可以自定义HTTP方法、URL、参数及各种回调函数。 2.Ajax.Updater:更新页面的部分内容,常...

    prototype.js 实例

    Prototype.js提供了事件处理功能,如`Event.observe`用于添加事件监听器。例如,我们可以在窗口上添加拖动功能: ```javascript myWindow.observe('mousedown', function(event) { var x = event.clientX - ...

    prototype.js 1.6

    - **事件处理**:使用 `Event.observe()` 和 `Event.stopObserving()` 注册和移除事件监听器,简化事件处理逻辑。 - **Ajax 请求**:`Ajax.Request` 和 `Ajax.Updater` 可以创建 AJAX 请求,处理响应并更新页面内容...

    prototype-1.6.0.3.js+prototype1.4 、1.5中文手册+prototype1.6英文手册

    例如,你可以使用Prototype创建新的DOM元素,选择和操作已存在的元素,以及监听和响应用户的交互事件。 接下来是三个CHM文件,分别是Prototype的1.4、1.5和1.6版本的手册。这些手册是开发者的重要参考资料,详细...

    prototype 1.6 API 中文版

    5. **事件处理**:Prototype 提供了`Event.observe()`和`Event.stopObserving()`方法来添加和移除事件监听器,以及`Event.stop()`来阻止事件的默认行为。 6. **JSON(JavaScript Object Notation)**:Prototype ...

Global site tag (gtag.js) - Google Analytics