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.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 。 对于浏览器,请查看: 。 对于不受支持的浏览器 ,您可以...
基于 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() { ...
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 . ...
table-view.js 用标准JavaScript编写的自动表更新程序。 设计用于移动设备的紧凑... 没有依赖关系,但是如果您希望Object.observe在不兼容的浏览器中工作,请在加载TableView脚本之前先加载Object.observe 。 排序代码
观察 局部Object.observ Polyfill。 “观察”是一个非常微小且不完整... 如果可用,它将使用本机Object.observe建造npm运行构建运行测试npm测试Observe ✓ should notify of any property changes1 passing (13ms)
ecmascript-object-observe ECMAScript Object.observe规范建议 可读规范位于 。 此规范提案使用来生成HTML运行 npm install -g ecmarkdown mkdir out ecmarkdown spec/index.html out/index.html cp css/elements...
现在,Object.observe开始在各种JS运行时中可用,数据绑定库可以是独立的。 多年以来,我们一直使用类似Backbone的模型来发布更改发生时的事件,或者使用带有脏检查的类似Angular的摘要循环。 这些是在浏览器中实现...
java-观察者模式(Observe)
它打算使用 Object.observe 来处理对底层模型的更改,然后重新渲染页面。 由于 Object.observe 是 Harmony (ECMAS 7),它现在只能在 Chrome 中使用(感谢支持未来的 Google!) 此任务列表允许执行以下操作: ...
Object.observe shim 请参阅:。 目标: 该 shim 提供了和谐提案中描述的算法的实现,旨在适用于所有符合 ES5 的浏览器。 依赖项: 虽然此实现没有依赖项,但它会尝试使用“setImmediate”(如果存在),如果不...
只需包含underscore-observe.js文件及其依赖项underscore.js和(如果要支持IE7) json2.js ,就可以了。 如果愿意,可以使用代替“下划线”。 观察者可以绑定到3种特定类型的更改:创建,更新和删除。 更改发生后,...