JavaScript基础--事件驱动和访问CSS技术(十)

1、原理：

2、快速入门案例

js中的事件主要分为4种：

JavaScript基础--事件驱动和访问CSS技术(十)

案例：监听鼠标点击事件，并能够显示鼠标点击的位置x,y

<script language="javascript" type="text/javascript">

   function test1(e){

      window.alert('x='+e.clientX+'y='+e.clientY);

   }

   function test2(e){

      window.alert('x='+e.clientX+'y='+e.clientY);

   }

   function test3(){

      window.alert(new Date());

   }

</script>

<body onmousedown="test1(event)" onmousemove="test2(event)">

   <input type="button" onclick="test3()" value="显示当前时间"/>

</body>

3、js如何访问元素的行内style属性，进行style外观修改

<script language="javascript" type="text/javascript">

   function test4(obj){

      //怎么知道button1被按，还是button2按下

      //window.alert(obj.value);

    if(obj.value=="黑色"){

         //获取div1

        var div1 = document.getElementById('div1');

        div1.style.backgroundColor="black";

        }else if(obj.value=="红色"){

       var div1 =document.getElementById('div1');

       div1.style.backgroundColor="red";

    }

 }

</script>

<body>

   <!--如何通过修改style来改变style-->

   <div id ="div1" style="width:400px;height:300px;background-color:red">div1</div>

   <input type="button" value="黑色" onclick="test4(this)"/>

   <input type="button" value="红色" onclick="test4(this)"/>

</body>

JavaScript基础--事件驱动和访问CSS技术(十)

4、js如何修改外部CSS样式

<html>

<head>

<link href="mycss.css" rel="stylesheet" type="text/css"/>

<script language="javascript" type="text/javascript">

    function test4(obj){

       //获取mycss.css 中的所有class选择器都获取，

       var ocssRules = document.styleSheets[0].rules;

       //从ocssRules中取出你希望的class

       //ocssRules[0];这里的0表示mycss.css文件中的第一个规则

    var style1 = ocssRules[0];

        if(obj.value=="黑色")

          style.style.backgroundColor="black";

        else if(obj.value=="红色")

          style1.style.backgroundColor="red";

    }

</script>

</head>

<body>

   <!--如何通过修改style来改变style-->

   <div id ="div1" class="style">div1</div>

   <input type="button" value="黑色" onclick="test4(this)"/>

   <input type="button" value="红色" onclick="test4(this)"/>

</body>

</html>

/*mycss.css*/

.style{

   width:600px;

   height:400px;

   background-color:black;

}

JavaScript基础--事件驱动和访问CSS技术(十)

5、如何区分当前浏览器是什么类型

//"",null,false,0,NaN 都是False

if(window.XMLHttpRequest){  //Mozilla,Safari,IE7,IE8

    if(!window.ActiveXObject){ //Mozilla,Safari,

        alert('Mozilla,Safari');

     }else{

        alert('IE');

     }

  }else{

   alert('IE6');

}

6、其他事件

<html>

<head>

<script language="javascript" type="text/javascript">

   function test4(e){

     window.alert("ok1");

   }

   function test5(e){

      window.alert("ok2");

   }

   function test6(){

      window.alert("输入框被选中");

   }

   function test7(){

       window.alert("onload");

      //把鼠标定位到text输入框

      //document.getElementById("text1").onfocus;  //onfocus这个属性不正确

   }

   function test8(){

      window.alert("onunload");

   }

   function test9(){

      window.alert("onbeforeunload");

   }

   function test10(){

      window.alert("不要点击右键");

      return false;

   }

   function test11(){

      window.alert("不能选择文字");

   }

</script>

</head>

<body onselectstart="return test11()" oncontextmenu="return test10()" onload="test7()" onbeforeunload="test9()" onunload="test8()">

   <!--如何通过修改style来改变style-->

   <div id ="div1" class="style">div1</div>

   <input type="button" value="黑色" onclick="test4(this),test5(this)"/>

   <input type="text" id="text1" onfocus="test6()"/>

</body>

</html>

/* window有三个事件

onload 页面打开

onbeforeunload 页面关闭前

onunload     关闭页面

说明：

第一次页面打开的调用顺序：onload

第二次刷新页面的调研顺序：onbeforeunload->onunload->onload

在第二次打开页面前，要用到onbeforeunload->onunload事件销毁第一次打开页面中没有用的对象，再用到onload加载第二次打开页面的变量信息

*/