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. vs2005水晶报表无法运行在X64机器上

    要下载补丁:CRRedist2005_X64.msi http://download.csdn.net/download/gcy007/7106933

  2. 初识Python第三天（二）

    2.2 OrderedDict有序字典 import collections dic = collections.OrderedDict() dic['k1'] = 'v1' dic['k2'] = ...

  3. Football Foundation (FOFO) TOJ 2556

    The football foundation (FOFO) has been researching on soccer; they created a set of sensors to desc ...

  4. [问题2014A05] 解答

    [问题2014A05]  解答 (1) 将矩阵 \(A\) 分解为两个矩阵的乘积: \[A=\begin{bmatrix} 1 & 1 & \cdots & 1 & 1 ...

  5. set集合，是一个无序且不重复的元素集合

    set集合,是一个无序且不重复的元素集合 class set(object):     """     set() -> new empty set object ...

  6. BI Content、Metadata Repository

    声明:原创作品,转载时请注明文章来自SAP师太技术博客( 博/客/园www.cnblogs.com):www.cnblogs.com/jiangzhengjun,并以超链接形式标明文章原始出处,否则将 ...

  7. Java 输入输出流 转载

    转载自:http://blog.csdn.net/hguisu/article/details/7418161 1.什么是IO Java中I/O操作主要是指使用Java进行输入,输出操作. Java所 ...

  8. Head First 设计模式 --6 命令模式

    命令模式:将"请求"封装成对象,以便使用不同的请求,队列或者日志来参数化其他对象.命令模式也支持可撤销的操作.用到的原则:1.封装变化2.组合优于继承3.针对接口编程,不能针对实现 ...

  9. Evolutionary Computing: 1. Introduction

    Outline 什么是进化算法 能够解决什么样的问题 进化算法的重要组成部分 八皇后问题(实例) 1. 什么是进化算法 遗传算法(GA)是模拟生物进化过程的计算模型,是自然遗传学与计算机科学相互结合的 ...

  10. js获取url参数值,js获取其他页面传递而来的值

    index.htm?参数1=数值1&参数2=数值2&参数3=数据3&参数4=数值4&...... 静态html文件js读取url参数 根据获取html的参数值控制htm ...