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. 在页面关闭或者刷新的时候触发 onbeforeunload

    该实例演示了如何使用 HTML DOM 向 body 元素添加 "onbeforeunload" 事件. 关闭当前窗口,按下 F5 或点击以下链接触发 onbeforeunload ...

  2. Device Tree（三）：代码分析【转】

    转自:http://www.wowotech.net/linux_kenrel/dt-code-analysis.html Device Tree(三):代码分析 作者:linuxer 发布于:201 ...

  3. zigbee学习之路(二)点亮LED

    一.前言 今天,我来教大家如何点亮led,这也是学习开发板最基础的步骤了. 二.原理分析 cc2530芯片跟虽然是51的内核,但是它跟51单片机还是有区别的,51单片机不需要对IO口进行配置,而cc2 ...

  4. javax.servlet.ServletException: com.ibatis.sqlmap.client.SqlMapException: There is no statement named...问题

    可能存在3种情况: 1.在xxx.xml文件中有两个标签的id命名相同: 2.DAO实现类方法中没有写对应xxx.xml的id名称: 3.实体映射文件xxx.xml未加入到sqlMap-Config. ...

  5. GZFramwork快速开发框架之窗体设计说明

    1.  明细页数据源获取(基类已经处理) 重载GetEditData方法,此方法为自定义获得明细也的数据源,用于绑定明细页,此返回值会赋值给EditData //根据主键获得数据编辑页的数据 publ ...

  6. Sqrt(x) - LintCode

    examination questions Implement int sqrt(int x). Compute and return the square root of x. Example sq ...

  7. [poj1200]Crazy Search(hash)

    Crazy Search Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 26713 Accepted: 7449 Descrip ...

  8. python打怪之路【第三篇】：利用Python实现三级菜单

    程序: 利用Python实现三级菜单 要求: 打印省.市.县三级菜单 可返回上一级 可随时退出程序 coding: menu = { '北京':{ '朝阳':{ '国贸':{ 'CICC':{}, ' ...

  9. CSS cursor属性

    介绍: 该属性规定要显示的光标的类型,该属性定义了鼠标指针放在一个元素边界范围之内的时候所用的光标的形状. 常用的属性值: default:默认光标 auto:浏览器默认的光标 pointer:光标呈 ...

  10. [WebLoad] 使用WebLoad进行Web Application 性能测试的流程

    1. 打开WebLOAD IDE录制或编写一个脚本文件,成功后会生成一个后缀为“.wlp”的文件. 2. 打开WebLOAD Console创建一个Load Template,创建过程当中需要添加“. ...