javascript简单事件处理和with用法介绍

910阅读　0评论2013-09-16　ewayfly
分类：JavaScript

介绍下javascript事件处理及with用法，主要是鼠标点击与移动。

简单的事件处理： 
1.鼠标点击 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  2. <html>
  3. <head>
  4. <title>简单的事件处理-www.jbxue.com</title>
  5. <meta name="Generator" content="EditPlus">
  6. <meta name="Author" content="">
  7. <meta name="Keywords" content="">
  8. <meta name="Description" content="">
  9. <script type="text/javascript">
  10. function click1(obj)
  11. {
  12. alert(obj.innerHTML);
  13. }
  14. </script>
  15. </head>
  16. <body>
  17. <div onclick="click1(this)" style="cursor:pointer">点击我吧</div>
  18. </body>
  19. </html>
this即div的上下文，点击后会弹出
之间的内容。 

2.鼠标移动 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  2. <html>
  3. <head>
  4. <title>鼠标移动实例-www.jbxue.com</title>
  5. <meta name="Generator" content="EditPlus">
  6. <meta name="Author" content="">
  7. <meta name="Keywords" content="">
  8. <meta name="Description" content="">
  9. <script type="text/javascript">
  10. function mouse1(obj)
  11. {
  12. obj.style.color = "#f00";
  13. obj.style.fontSize = "18px"
  14. }
  15. function mouse2(obj)
  16. {
  17. obj.style.color = "#000";
  18. obj.style.fontSize = "16px"
  19. }
  20. </script>
  21. </head>
  22. <body>
  23. <div onmouseover="mouse1(this)" onmouseout="mouse2(this)">移动到这儿</div>
  24. </body>
  25. </html>
onmouseover鼠标放到那儿时，会把字体变大，字体成为红色，离开时字体和颜色恢复。
 
3.with用法 

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  2. <html>
  3. <head>
  4. <title>with的用法</title>
  5. <meta name="Generator" content="EditPlus">
  6. <meta name="Author" content="">
  7. <meta name="Keywords" content="">
  8. <meta name="Description" content="">
  9. <script type="text/javascript">
  10. with(document)
  11. {
  12. write("niujiabin"+"
    "    );
  13. write("maybe"+"
    "    );
  14. write("gossip"+"
    "    );
  15. }
  16. </script>
  17. </head>
  18. <body>
  19. </body>
  20. </html>
  21. 效果与如下相同：
  22. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "">
  23. <html>
  24. <head>
  25. <title> New Document </title>
  26. <meta name="Generator" content="EditPlus">
  27. <meta name="Author" content="">
  28. <meta name="Keywords" content="">
  29. <meta name="Description" content="">
  30. <script type="text/javascript">
  31. document.write("niujiabin"+"
    "    );
  32. document.write("maybe"+"
    "    );
  33. document.write("gossip"+"
    "    );
  34. </script>
  35. </head>
  36. <body>
  37. </body>
  38. </html>
上一篇：Rsync ERROR: auth failed on module解决方法
下一篇：Js中cookie的使用详细分析