prototype中Form的测试

原创

sucre03 2010-11-01 14:02:43 博主文章分类：ajax ©著作权

©著作权归作者所有：来自51CTO博客作者sucre03的原创作品，请联系作者获取转载授权，否则将追究法律责任

直接看例子吧，我在例子中做了些注释

<!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>