直接看例子吧，我在例子中做了些注释
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
- <html>
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
- <title>Untitled Document</title>
- <script src="prototype.js">
- </script>
- <script>
- function test(evt){
- //Event.element功能为返回引发此事件的元素，此处是返回触发单击事件的元素，则为$('btn')
- alert($("btn") === Event.element(evt));
- }
- function test2(evt){
- alert("clicked");
- //如果没有这行代码，单击后那个链接就会打开
- Event.stop(evt);
- }
- function test3(evt){
- //Event.findElement向 DOM 树的上位查找，找到第一个给定标记名称的元素， 从这个元素开始触发事件。
- alert($("div1") === Event.findElement(evt, "div"))
- }
- </script>
- </head>
- <body>
- <form id="testForm">
- <div id="div1">
- <input type="text" id="txt" name="txt" onchange="return alert('Now')"/>
- <input type="text" id="txt2" name="txt2" />
- <input type="button" id="btn" name="btn" value="click" onclick="test(event)"/>
- <input type="submit" />
- <a href="http://www.google.com" onclick="test2(event)">Google</a>
- <input type="button" id="btn1" name="btn1" value="click" onclick="test3(event)"/>
- </div>
- </form>
- <script>
- /**
- Form.Element.Observer以及Form.Observer类：
- 周期性监视表单元素，如果表单或表单元素的值有改变时，执行执行一个回调函数，使用方式如下：
- var oser=new Form.Element.Observer(element, frequency, callback)
- or oser=new Form.Observer(form, frequency, callback)
- callback可以定义两个参数 form/element、Form.serialize()/value
- Form.Element.EventObserver和Form.EventObserver类：
- 这两个类跟上面的差不多，只是不是周期性的监视，而是利用元素的change或click事件来监视表单元素的变化，当发生变化时执行callback，参数跟上面一样
- */
- new Form.EventObserver("testForm", function(){
- alert("form changed");
- });
- new Form.Element.EventObserver("txt", function(){
- alert("txt changed");
- });
- new Form.Element.Observer("txt", 1, function(){
- alert("changed");
- });
- new Form.Observer("testForm", 1, function(){
- alert("form changed");
- });
- </script>
- </body>
- </html>
form中指定的元素一旦发生变化，便会激活指定的事件。
本文转自sucre03 51CTO博客，原文链接：http://blog.51cto.com/sucre/413470，如需转载请自行联系原作者
