1、原理：

2、快速入门案例

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

案例：监听鼠标点击事件，并能够显示鼠标点击的位置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>

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;

}

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加载第二次打开页面的变量信息

*/

JavaScript基础--事件驱动和访问CSS技术(十)的更多相关文章

  1. JavaScript基础--DOM对象加强篇（十四）

    1.document 对象 定义:document对象代表的整个html文档,因此可以去访问到文档中的各个对象(元素)document重要的函数 1.1 write 向文档输出文本或js代码 1.2 ...

  2. 前端html、Javascript、CSS技术小结

    简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...

  3. 学习笔记 第十五章 JavaScript基础

    第15章   JavaScript基础 [学习重点] 了解JavaScript基础知识 熟悉常量和变量 能够使用表达式和运算符 正确使用语句 能够掌握数据类型和转换的基本方法 正确使用函数.对象.数组 ...

  4. 前端（十二）—— JavaScript基础操作：if语句、for循环、while循环、for...in、for...of、异常处理、函数、事件、JS选择器、JS操作页面样式

    JavaScript基础操作 一.分支结构 1.if语句 if 基础语法 if (条件表达式) { 代码块; } // 当条件表达式结果为true,会执行代码块:反之不执行 // 条件表达式可以为普通 ...

  5. javascript基础01

    javascript基础01 Javascript能做些什么? 给予页面灵魂,让页面可以动起来,包括动态的数据,动态的标签,动态的样式等等. 如实现到轮播图.拖拽.放大镜等,而动态的数据就好比不像没有 ...

  6. (转)JAVA AJAX教程第二章-JAVASCRIPT基础知识

    开篇:JAVASCRIPT是AJAX技术中不可或缺的一部分,所以想学好AJAX以及现在流行的AJAX框架,学好JAVASCRIPT是最重要的.这章我给大家整理了一些JAVASCRIPT的基础知识.常用 ...

  7. JavaScript基础知识点

    本书目录 第一章:  JavaScript语言基础 第二章:  JavaScript内置对象第三章:  窗口window对象第四章:  文档document对象第五章:  表单form对象第六章:   ...

  8. JavaScript基础（.....持续待更）

    javascript热身 一.你知道,为什么JavaScript非常值得我们学习吗? 1. 所有主流浏览器都支持JavaScript. 2. 目前,全世界大部分网页都使用JavaScript. 3. ...

  9. JavaScript基础知识（一）

    一.JavaScript基础 1.JavaScript用法: HTML 中的脚本必须位于 <script> 与 </script> 标签之间. 脚本可被放置在 HTML 页面的 ...

随机推荐

  1. Java 中System里getProperty(something)

    Java 中System里getProperty 方法获得系统参数 Key Description of Associated Value 中文描述 java.version Java Runtime ...

  2. flexigrid随手记

    最近要用到flexigrid做表格,随手记一些知识点. 引入了两个jquery库(jquery.js和jquery-1.7.1.min.js),发生冲突,只保留一个 $("#gridTabl ...

  3. XAF How to: 实现一个WCF Application Server 并配置它的客户端应用

    本主题描述了如何实现一个 WCF 中间层应用程序服务器及如何配置 XAF客户端连接到此服务器. 注意 本主题演示可以由解决方案向导自动生成的代码.执行操作时,如果你想要在现有的 XAF 解决方案中实现 ...

  4. JS中的各种类型转换规则(转)

    JS中的类型转换非常恶心,大家都懂的,不过该学还是要学. 今天看犀牛书看到了转换规则,总结出来. X转字符串.数字.布尔值 X表示各种类型的值,直接上图: 值 转数字 转字符串 转布尔值 undefi ...

  5. 访问google.com

    ping www.google.com 得到的IP来访问

  6. js string to int

    一.js中string转int有两种方式 Number() 和 parseInt() <script>     var   str='1250' ;  alert( Number(str) ...

  7. zoj3430Detect the Virus(ac自动机）

    链接 解码之后是跟普通的自动机求解一下的,只不过解码比较恶心,512=>N>=0 ,所以不能用字符串来存,需要转换成整数来做. #include <iostream> #inc ...

  8. windows递归拷贝（或删除等操作）文件

    SHFileOperation 以拷贝为例. CString strFrom = ....._T("src");CString strTo = ....._T("dest ...

  9. laravel 中 与前端的一些事3 之使用Gulp编译less

    更多关于less的使用方法,参考上一篇scss的使用,两者大同小异

  10. JavaWeb高级：Servlet源码分析

    很多东西归根结底是对Servlet源代码的了解,通过学习源代码加深了解Java高级特性