Chinaunix首页 | 论坛 | 博客

一往情深的网事ewayfly.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

ewayfly

  • 博客访问： 450214
  • 博文数量： 141
  • 博客积分： 211
  • 博客等级： 入伍新兵
  • 技术积分： 1049
  • 用 户 组： 普通用户
  • 注册时间： 2010-09-17 16:25
个人简介

如此经年，望尽千帆。

文章分类

全部博文（141）

文章存档

2014年（73）

2013年（65）

2012年（3）

我的朋友
最近访客
推荐博文
javascript简单事件处理和with用法介绍

分类： JavaScript

2013-09-16 22:27:27

介绍下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>
阅读(844) | 评论(0) | 转发(0) |
0

上一篇：Rsync ERROR: auth failed on module解决方法

下一篇：Js中cookie的使用详细分析

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6