prototype中Form的测试

痛定思痛。 2022-02-03 08:11 171阅读 0赞

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

1.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"**>**
2.  **<****html****>**
3.  **<****head****>**
4.  **<****meta**http-equiv="Content-Type"content="text/html; charset=utf-8"**>**
5.  **<****title****>**Untitled Document**</****title****>**
6.  **<****script**src="prototype.js"**>**
7.  **</****script****>**
8.  **<****script****>**
9.   function test(evt)\{ 
10.  //Event.element功能为返回引发此事件的元素，此处是返回触发单击事件的元素，则为$('btn') 
11.  alert($("btn") === Event.element(evt)); 
12.  \} 
13. 
14.  function test2(evt)\{ 
15.  alert("clicked"); 
16.  //如果没有这行代码，单击后那个链接就会打开 
17.  Event.stop(evt); 
18.  \} 
19. 
20.  function test3(evt)\{ 
21.  //Event.findElement向 DOM 树的上位查找，找到第一个给定标记名称的元素， 从这个元素开始触发事件。 
22.  alert($("div1") === Event.findElement(evt, "div")) 
23.  \} 
24. **</****script****>**
25. **</****head****>**
26. **<****body****>**
27. **<****form**id="testForm"**>**
28. **<****div**id="div1"**>**
29. **<****input**type="text"id="txt"name="txt"onchange="return alert('Now')"**/>**
30. **<****input**type="text"id="txt2"name="txt2"**/>**
31. **<****input**type="button"id="btn"name="btn"value="click"onclick="test(event)"**/>**
32. **<****input**type="submit"**/>**
33. **<****a**href="http://www.google.com"onclick="test2(event)"**>**Google**</****a****>**
34. **<****input**type="button"id="btn1"name="btn1"value="click"onclick="test3(event)"**/>**
35. **</****div****>**
36. **</****form****>**
37. **<****script****>**
38.  /\*\* 
39.  Form.Element.Observer以及Form.Observer类： 
40. 
41.  　　周期性监视表单元素，如果表单或表单元素的值有改变时，执行执行一个回调函数，使用方式如下： 
42. 
43.  　　var oser=new Form.Element.Observer(element, frequency, callback) 
44. 
45.  　　or oser=new Form.Observer(form, frequency, callback) 
46. 
47.  　　callback可以定义两个参数 form/element、Form.serialize()/value 
48. 
49.  　　Form.Element.EventObserver和Form.EventObserver类： 
50. 
51.  　　这两个类跟上面的差不多，只是不是周期性的监视，而是利用元素的change或click事件来监视表单元素的变化，当发生变化时执行callback，参数跟上面一样 
52. 
53.  \*/ 
54.  new Form.EventObserver("testForm", function()\{ 
55.  alert("form changed"); 
56.  \}); 
57. 
58.  new Form.Element.EventObserver("txt", function()\{ 
59.  alert("txt changed"); 
60.  \}); 
61. 
62.  new Form.Element.Observer("txt", 1, function()\{ 
63.  alert("changed"); 
64.  \}); 
65. 
66.  new Form.Observer("testForm", 1, function()\{ 
67.  alert("form changed"); 
68.  \}); 
69. 
70. **</****script****>**
71. **</****body****>**
72. **</****html****>**

form中指定的元素一旦发生变化，便会激活指定的事件。

本文转自sucre03 51CTO博客，原文链接：http://blog.51cto.com/sucre/413470，如需转载请自行联系原作者