JavaScript事件类型学习
1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3.<head> 4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5.<title>javascript事件</title> 6.<script language="JavaScript" type="text/javascript"> 7. 8. function textChange(obj){ 9. //alert(obj); 10. 11. var div=document.getElementById("inputDiv"); 12. var value=obj.value; 13. div.innerHTML=value; 14. } 15. 16. function textChange2(obj){ 17. var div=document.getElementById("inputDiv2"); 18. var value=obj.value; 19. div.innerHTML=value; 20. 21. } 22.</script> 23. 24.</head> 25. 26. 27.<body> 28. onChange事件:<input type="text" id="input1" onchange="textChange(this)"/><div id="inputDiv"></div> 29. onpropertyChange事件:<input type="text" id="input2" onpropertychange="textChange2(this)"/><div id="inputDiv2"></div> 30. 31.</body> 32.</html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript事件</title> <script language="JavaScript" type="text/javascript"> function textChange(obj){ //alert(obj); var div=document.getElementById("inputDiv"); var value=obj.value; div.innerHTML=value; } function textChange2(obj){ var div=document.getElementById("inputDiv2"); var value=obj.value; div.innerHTML=value; } </sc 1.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2.<html xmlns="http://www.w3.org/1999/xhtml"> 3.<head> 4.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5.<title>javascript事件</title> 6.<script language="JavaScript" type="text/javascript"> 7. 8. function textChange(obj){ 9. //alert(obj); 10. 11. var div=document.getElementById("inputDiv"); 12. var value=obj.value; 13. div.innerHTML=value; 14. } 15. 16. function textChange2(obj){ 17. var div=document.getElementById("inputDiv2"); 18. var value=obj.value; 19. div.innerHTML=value; 20. 21. } 22.</script> 23. 24.</head> 25. 26. 27.<body> 28. onChange事件:<input type="text" id="input1" onchange="textChange(this)"/><div id="inputDiv"></div> 29. onpropertyChange事件:<input type="text" id="input2" onpropertychange="textChange2(this)"/><div id="inputDiv2"></div> 30. 31.</body> 32.</html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript事件</title> <script language="JavaScript" type="text/javascript"> function textChange(obj){ //alert(obj); var div=document.getElementById("inputDiv"); var value=obj.value; div.innerHTML=value; } function textChange2(obj){ var div=document.getElementById("inputDiv2"); var value=obj.value; div.innerHTML=value; } </script> </head> <body> onChange事件:<input type="text" id="input1" onchange="textChange(this)"/><div id="inputDiv"></div> onpropertyChange事件:<input type="text" id="input2" onpropertychange="textChange2(this)"/><div id="inputDiv2"></div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 代码2: 1.<html xmlns="http://www.w3.org/1999/xhtml"> 2.<head> 3.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4.<title>javascript事件2</title> 5.<script language="JavaScript" type="text/javascript"> 6. function cardOnFocus(obj){ 7. var value=obj.value; 8. if(value=="请输入格式:10XXXXXX"){ 9. obj.value=""; 10. } 11. } 12. 13. function cardOnBlur(obj){ 14. var value=obj.value; 15. var pattern=/^10\d{6}$/; 16. var result=pattern.test(value); 17. 18. if(!result){ 19. alert("您输入的格式错误,重新输入!"); 20. obj.focus(); 21. }else{ 22. alert("格式输入正确!"); 23. } 24. } 25.</script> 26. 27.</head> 28. 29.<body> 30. <form> 31. <h2>卡号:<input type="text" id="inputCard" value="请输入格式:10XXXXXX" onfocus="cardOnFocus(this)" onblur="cardOnBlur(this)" /></h2> 32. <br /> 33. 密码:<input type="password" id="inputPass" value=""/> 34. </form> 35.</body> 36.</html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript事件2</title> <script language="JavaScript" type="text/javascript"> function cardOnFocus(obj){ var value=obj.value; if(value=="请输入格式:10XXXXXX"){ obj.value=""; } } function cardOnBlur(obj){ var value=obj.value; var pattern=/^10\d{6}$/; var result=pattern.test(value); if(!result){ alert("您输入的格式错误,重新输入!"); obj.focus(); }else{ alert("格式输入正确!"); } } </script> </head> <body> <form> <h2>卡号:<input type="text" id="inputCard" value="请输入格式:10XXXXXX" onfocus="cardOnFocus(this)" onblur="cardOnBlur(this)" /></h2> <br /> 密码:<input type="password" id="inputPass" value=""/> </form> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 代码3: 1.<HTML> 2. <HEAD> 3. <TITLE> JavaScript中的事件(下) </TITLE> 4. <META NAME="Content-Type" CONTENT="text/html;charset=utf-8"> 5. <META NAME="Author" CONTENT=""> 6. <META NAME="Keywords" CONTENT=""> 7. <META NAME="Description" CONTENT=""> 8. <SCRIPT LANGUAGE="JavaScript"> 9. <!-- 10. function pageOnLoad(){ 11. var xDiv=document.getElementById("positionX"); 12. var yDiv=document.getElementById("positionY"); 13. 14. function documentMouseMove(ev){ 15. evev=ev||window.event; 16. if(navigator.userAgent.indexOf("Firefox")!=-1){ 17. if(ev.pageX||ev.pageY){ 18. xDiv.innerHTML="<font color='red'>"+ev.pageX+"</font>"; 19. yDiv.innerHTML="<font color='red'>"+ev.pageY+"</font>"; 20. } 21. }else{ 22. var x=ev.clientX+document.body.scrollLeft-document.body.clientLeft; 23. var y=ev.clientY+document.body.scrollTop-document.body.clientTop; 24. xDiv.innerHTML="<font color='red'>"+x+"</font>"; 25. yDiv.innerHTML="<font color='red'>"+y+"</font>"; 26. } 27. } 28. 29. document.onmousemove=documentMouseMove; 30. } 31. //--> 32. </SCRIPT> 33. </HEAD> 34. 35. <BODY onload="pageOnLoad()"> 36. X:<div id="positionX"></div> 37. Y:<div id="positionY"></div> 38. </BODY> 39.</HTML> ript> </head> <body> onChange事件:<input type="text" id="input1" onchange="textChange(this)"/><div id="inputDiv"></div> onpropertyChange事件:<input type="text" id="input2" onpropertychange="textChange2(this)"/><div id="inputDiv2"></div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 代码2: 1.<html xmlns="http://www.w3.org/1999/xhtml"> 2.<head> 3.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 4.<title>javascript事件2</title> 5.<script language="JavaScript" type="text/javascript"> 6. function cardOnFocus(obj){ 7. var value=obj.value; 8. if(value=="请输入格式:10XXXXXX"){ 9. obj.value=""; 10. } 11. } 12. 13. function cardOnBlur(obj){ 14. var value=obj.value; 15. var pattern=/^10\d{6}$/; 16. var result=pattern.test(value); 17. 18. if(!result){ 19. alert("您输入的格式错误,重新输入!"); 20. obj.focus(); 21. }else{ 22. alert("格式输入正确!"); 23. } 24. } 25.</script> 26. 27.</head> 28. 29.<body> 30. <form> 31. <h2>卡号:<input type="text" id="inputCard" value="请输入格式:10XXXXXX" onfocus="cardOnFocus(this)" onblur="cardOnBlur(this)" /></h2> 32. <br /> 33. 密码:<input type="password" id="inputPass" value=""/> 34. </form> 35.</body> 36.</html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>javascript事件2</title> <script language="JavaScript" type="text/javascript"> function cardOnFocus(obj){ var value=obj.value; if(value=="请输入格式:10XXXXXX"){ obj.value=""; } } function cardOnBlur(obj){ var value=obj.value; var pattern=/^10\d{6}$/; var result=pattern.test(value); if(!result){ alert("您输入的格式错误,重新输入!"); obj.focus(); }else{ alert("格式输入正确!"); } } </script> </head> <body> <form> <h2>卡号:<input type="text" id="inputCard" value="请输入格式:10XXXXXX" onfocus="cardOnFocus(this)" onblur="cardOnBlur(this)" /></h2> <br /> 密码:<input type="password" id="inputPass" value=""/> </form> </body> </html> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 代码3: 1.<HTML> 2. <HEAD> 3. <TITLE> JavaScript中的事件(下) </TITLE> 4. <META NAME="Content-Type" CONTENT="text/html;charset=utf-8"> 5. <META NAME="Author" CONTENT=""> 6. <META NAME="Keywords" CONTENT=""> 7. <META NAME="Description" CONTENT=""> 8. <SCRIPT LANGUAGE="JavaScript"> 9. <!-- 10. function pageOnLoad(){ 11. var xDiv=document.getElementById("positionX"); 12. var yDiv=document.getElementById("positionY"); 13. 14. function documentMouseMove(ev){ 15. evev=ev||window.event; 16. if(navigator.userAgent.indexOf("Firefox")!=-1){ 17. if(ev.pageX||ev.pageY){ 18. xDiv.innerHTML="<font color='red'>"+ev.pageX+"</font>"; 19. yDiv.innerHTML="<font color='red'>"+ev.pageY+"</font>"; 20. } 21. }else{ 22. var x=ev.clientX+document.body.scrollLeft-document.body.clientLeft; 23. var y=ev.clientY+document.body.scrollTop-document.body.clientTop; 24. xDiv.innerHTML="<font color='red'>"+x+"</font>"; 25. yDiv.innerHTML="<font color='red'>"+y+"</font>"; 26. } 27. } 28. 29. document.onmousemove=documentMouseMove; 30. } 31. //--> 32. </SCRIPT> 33. </HEAD> 34. 35. <BODY onload="pageOnLoad()"> 36. X:<div id="positionX"></div> 37. Y:<div id="positionY"></div> 38. </BODY> 39.</HTML>