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. springmvc 组合注解

    组合注解的意思就是一个注解中包含多个注解.在springmvc 的@RestController中,你就可发现. @Target(ElementType.TYPE) @Retention(Retent ...

  2. Super Ugly Number

    eg 2,3,5 把第一个元素(2,1)放到最小堆,2表示乘积,1表示乘数   乘数     队列                          最小堆                   即将进 ...

  3. Orcale与jfinal的添加时间问题

    时间只能不能使用一般的方法进行添加,必须转换,比如添加当前时间,如上图所示

  4. POJ 1852 Ants

    题目的意思是说一个长度为m的杆,上面有n个蚂蚁,告诉每个蚂蚁的初始位置,每个蚂蚁速度都是一样的,问所有的蚂蚁离开杆的最短和最长时间是多少. 模拟题,所有的蚂蚁看成一样的,可以这样理解,即使相撞按反方向 ...

  5. 2015弱校联盟(1) - I. Travel

    I. Travel Time Limit: 3000ms Memory Limit: 65536KB The country frog lives in has n towns which are c ...

  6. web前段 弹出小例子

    <html> <head> <meta charset="utf-8"> <meta name="viewport" ...

  7. 【Spring】Junit加载Spring容器作单元测试

    如果我们需要对我们的Service方法作单元测试,恰好又是用Spring作为IOC容器的,我们可以这么配置Junit加载Spring容器,方便做单元测试. > 基本的搭建 (1)引入所需的包 & ...

  8. [问题2014S06] 复旦高等代数II（13级）每周一题（第六教学周）

    [问题2014S06]  试用有理标准型理论证明13级高等代数I期末考试最后一题: 设 \(V\) 为数域 \(K\) 上的 \(n\) 维线性空间,  \(\varphi\) 为 \(V\) 上的线 ...

  9. GZFramwork数据库层《前言》DLL项目引用

    新建项目: 1. 项目引入GZFramwork.dll NuGet地址:Install-Package GZFramwork 每个项目都引用 2.BLL层 设置数据库连接维护类:继承于:GZFramw ...

  10. WebSocket实战之————Workerman服务器的安装启动

    安装php apt-get install php5-cli root@iZ23b64pe35Z:/home/www# php -v PHP 5.5.9-1ubuntu4.20 (cli) (buil ...