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));
分享到:
相关推荐
Object.observe, Object.observe polyfill/shim尝试兼容 其他选项MaxArt2501已经经开始了自己的Object.observe polyfill,看看他的提交历史和推理,让我认为它可以能会很好地支持。 如果你寻找一个 Object.observe ...
一个使Array.observe和Object.observe易于使用的Javascript类。 Observe_evented的特长是将本机API返回的一批更改分为原子事件和一致事件。 它还提供了多个选项,使它们更易于处理。 在上进行测试。 该库没有依赖...
##Object.observe() - 是在 Object.prototype 上定义的方法 - 它是 ECMAScript 7(Harmony) 规范的一部分。 - 在浏览器级别异步观察对象的变化。 - 观察者按照它们发生的顺序接收一系列变化。 - 使用 Object....
Rx.Observe RxJava2 ready ! Create an interface with @Observe annotated method public class User { private int age; @Observe public int getAge() { return age; } @Observe public void setAge...
在“前端项目-object-observe.zip”中,我们可能找到一个实现Object.observe()功能的Polyfill,这是一种在不支持该API的浏览器中模拟其行为的代码库。Polyfill使得开发者可以在更广泛的环境中使用Object.observe(),...
Object.prototype.observe()一个简单替代方案,可以轻松地为变量附加 onChange 侦听器/触发器。 您是否曾经希望能够在变量更改时触发事件,但又不想依赖不受广泛支持的Object.observe()或Object.watch()方法? 现在...
Observe+(现在观察嵌套对象/数组!) Observe+ 是一个基于的库,增加了以下功能: 对单个属性/索引/事件类型进行细粒度观察 观察嵌套对象和数组 在发布所有事件之前暂停/恢复对数据结构进行批量更新 在事件...
Backbone-observe是Backbone扩展组件,它使Backbone框架支持Object.observe功能。 该组件可以在浏览器和node-js环境中使用。 什么是Object.observe Object.observe()是将来的ECMAScript标准的一部分,是一种用于...
return false},docKeyHandler:function(a){if(a.keyCode==Event.KEY_ESC){if(this.pickerActive){this.element.value=this.originalValue;this.hide()}}},keyHandler:function(a){switch(a.keyCode){case Event.KEY_...
嵌套观察Object.observe()用于嵌套对象。兼容性nested-observe内部使用WeakMap (用于垃圾收集)。 Node.js的支持WeakMap和Object.observe从版本0.11.13 。 对于浏览器,请查看: 。 对于不受支持的浏览器 ,您可以...
在JavaScript的世界里,`Object.observe` 是一个曾经被引入但后来被废弃的API,它允许开发者监听并响应对象属性的变化。这个API的核心理念是提供一种高效、直接的方式来观察和处理对象或数组的变更事件,而无需手动...
**Ractive-watch:利用Object.observe实现数据监听** Ractive-watch 是一个针对 Ractive.js 框架的插件,它引入了对 `Object.observe` API 的支持,以便更高效地在 Ractive 模型上设置和监控属性变化,而不是直接...
基于 Observation 库的Object.observe polyfill 例子 // A user model var user = { id: 0, name: 'Romeo Kenfack Tsakem', title: 'Mr.' }; // Create a greeting for the user function updateGreeting() { ...
// 使用Prototype框架的Event.observe方法绑定事件处理器 Event.observe(document, 'mousewheel', scrollfunc); // IE Event.observe(document, 'DOMMouseScroll', scrollfunc); // Firefox ``` ### 示例2: 自定义...
Object.observe 扩展 ###Oject.observe 封装引入简单的数据绑定(仅适用于 global aero 版本,尚不支持 commonJS 版本) Object.observe 目前仅在 Chrome 浏览器中实现。 为了得到一个完整的Object.observe支持,你...
jsop JSON文件的单向数据绑定jsop是由Object.observe支持的JSON文件读取器/写入器。前var fs = require ( 'fs' )var config = JSON . parse ( fs . readFileSync ( 'config.json' ) )config . foo = 'bar'fs . ...
`minibind`是一个小型库,它利用了`Object.observe`这一特性来实现对象与DOM元素之间的绑定。 `Object.observe`是JavaScript的一个实验性API,用于监听对象的变化。它可以观察到对象属性的添加、删除、修改等事件,...
在 Prototype 中,我们可以使用 `Event.observe` 来绑定事件监听器。例如: ```javascript document.observe('mousedown', startScroll); document.observe('mouseup', stopScroll); document.observe('mousemove',...
Prototype.js提供了事件处理功能,如`Event.observe`用于添加事件监听器。例如,我们可以在窗口上添加拖动功能: ```javascript myWindow.observe('mousedown', function(event) { var x = event.clientX - ...
table-view.js 用标准JavaScript编写的自动表更新程序。 设计用于移动设备的紧凑... 没有依赖关系,但是如果您希望Object.observe在不兼容的浏览器中工作,请在加载TableView脚本之前先加载Object.observe 。 排序代码