JavaScript事件编程入门案例和对对象属性的遍历

来源：互联网发布：商品上淘宝首页编辑：程序博客网时间：2024/05/22 10:31

JavaScript是基于时间驱动机制的，所以说很多很多方法也就是function是可以监听事件或者他的返回值然后对他的

返回值或者方法进行反应，这就是事件驱动机制。下面我们以一个例子来说明，这个例子是在界面画一个div然后根据两

个按钮来实现对这个div的背景颜色进行调整，但是我做这个东西的时候很悲催的遇见了一个问题，就是无论怎么调试都

无法在内部CSS也就是style的情况下改变他的背景颜色，最后发现原来在js 里面背景颜色不是bg-color而是bgColor，真

是恶心。

请看例子

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html>  <head>    <title>test3.html</title>    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">    <meta http-equiv="description" content="this is my page">    <meta http-equiv="content-type" content="text/html; charset=UTF-8">  <script type="text/javascript">  function test(eventObj){  var div = document.getElementById("div1");  if(eventObj.value=="黑色"){  div.style.backgroundColor="black";  }else{  div.style.backgroundColor="red";  }  /*  var m = div.style;  for(var o in m)  window.alert(o);*/  }  </script>    </head>    <body>   <div id="div1" style="width:400px;height:500px;background-color:red;"></div>   <input type="button" value="黑色" onclick="test(this);"/>   <input type="button" value="红色" onclick="test(this);"/>  </body></html>

注释的那个部分就是对style对象的所有属性进行的一个遍历，这个方法非常好用，因为很多对象你不方便去找文档

，所以通过这个形式是非常方便完成的，当然了，我就是通过这个方式完成了这个恶心的bg-color，真是无语。标记

一下。防止以后忘了！！！