还记得当初学JAVA-GUI编程时学习过事件监听机制，此时再学习JavaScript中的事件驱动机制，不免简单。当初学习时也是画过原理图，所以从原理图开始吧！

js是采用事件驱动(event-driven)响应用户操作的。比如通过鼠标或者按键在浏览器窗口或者网页元素(按钮，文本框...)上执行的操作，我们称之为事件(Event)。由鼠标或热键引发的一连串程序的动作，称之为事件驱动(Event-Driver)。对事件进行处理程序或函数，我们称之为事件处理程序(Event Handler)。

事件的分类：

鼠标事件：

当用户在页面上用鼠标点击页面元素时，对应的dom节点会触发鼠标事件，主要有click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove等。

键盘事件：

当用户用键盘输入信息时，会触发键盘操作事件。主要包括keydown、keypress、keyup三个。

HTML事件：

在html节点加载变更等相关的事件，比如window的onload、unload、abort、error，文本框select、change等等。

其它事件：

页面中一些特殊对象运行过程中产生的事件，比如xmlhttprequest对象的相关事件。

如下例：

作为第一个入门案例，会遇到一个问题如下：

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鼠标事件</title>

    <script type="text/javascript">

        function test(e) {

            window.alert("x = "+ e.cientX + " y =" + e.clientY);

        }

    </script>

</head>

<body onmousedown="test(event)">

</body>

</html>

以上代码的作用是，在鼠标按下后，弹出窗口显示x、y的坐标。

这段代码在IE9、Chrome下都不可以正常运行。这到底是什么原因呢?

后来，我就搜索了一下，发现有人和我有同样的问题，他也解决了，我是参考js的onmousedown事件放在<body>标签下与firefox浏览器所产生的问题这篇文章的。

原来是body的原因。

于是，我就给body加了个宽高试试：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鼠标事件</title>

    <script type="text/javascript">

        function test(e) {

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

        }

    </script>

</head>

<body style="width: 1000px; height: 800px; border: 1px solid red;" onmousedown="test(event)">

</body>

</html>

我们不难发现，当我们没有给body设置宽高时，body的范围仅仅是一条线，所以onmousedown事件也就无法响应。所以，在给body设置宽高后，我们就可以在body的宽高范围响应onmousedown事件了。

 如何理解事件驱动机制

为了让大家进一步理解js的事件驱动机制，我们来看两个案例：

案例：显示一个按钮，点击按钮后弹出对话框显示当前时间。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鼠标事件</title>

    <script type="text/javascript">

        function test1() {

            window.alert(new Date().toLocaleString());

        }

    </script>

</head>

<body>

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

</body>

</html>

案例：通过点击按钮改变DIV的颜色。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鼠标事件</title>

    <script type="text/javascript">

        //js如何访问元素的style属性，进行样式修改

        function test4(eventObj) {

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

            //window.alert(eventObj.value);

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

                //获取div1

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

                div1.style.background = "black";

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

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

                div1.style.background = "red";

            }

        }

    </script>

</head>

<body>

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

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

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

</body>

</html>

javascript访问修改CSS样式表

javascript访问修改样式表，可以方便的动态修改页面：

1、访问元素中style属性的CSS样式

这个可以直接使用style对象方便的访问，例如：

<div id="mdiv" style="background-color:blue;">...</div>

访问CSS的方法是：

<script type="text/javascript">

//获得元素

var oDiv=document.getElementById("mdiv");

//访问元素的style对象，再访问对象中的属性，也可以修改属性的值，直接为他赋值

alert(oDiv.style.backgroundColor);

</script>

 2、访问外部定义的CSS样式(类定义的CSS样式)

这个没法使用上面的方法去访问，因为CSS数据不是存储在style属性中，它是存储在类中的。

访问方法：先取得定义类的样式表的引用，用document.styleSheets集合实现这个目的，这个集合包含HTML页面中所有的样式表，DOM为每个样式表定义一个cssRules的集合，这个集合中包含定义在样式表中的所用CSS规则(注意：Mozilla和Safasi中是cssRules，而IE中是rules)。

例，

外部样式表(myCss.css)如下：

/*第一条规则*/

div .ss{

    background-color:red;

    width:101px;

}

/*第二条规则*/

a .btn2{

    background:url(imag/2-AccessCtl.jpg);

}

访问css：

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

//访问第一条规则

alert(ocssRules[0].style.backgroundColor);

//设置值

ocssRules[0].style.width="992px";

//访问第二条规则

alert(ocssRules[1].style.background);

//设置值

ocssRules[0].style.background="url(imag/3-back.jpg);";

以上是我用到的时候一些简单的应用，具体深入的使用可以参看《javascript高级程序设计》中DOM技术部分。

如下例：

案例：通过点击按钮改变DIV的颜色(使用CSS样式表修改)

外部样式表(mycss.css)：

.style1 {

    width: 600px;

    height: 400px;

    background: black;

}

说明：以下代码在Chrome浏览器不起作用，在IE9中无论使用.rules还是使用.cssRules都通过测试。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>js事件驱动机制操作外部CSS案例</title>

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

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

    <script type="text/javascript">

        function test4(eventObj) {

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

            var ocssRules = document.styleSheets[0].cssRules;//或xxx.rules

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

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

            var style1 = ocssRules[0];

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

                style1.style.background = "black";

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

                style1.style.background = "red";

            }

        }

    </script>

</head>

<body style="width: 900px; height: 800px; border: 1px solid red;">

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

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

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

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

</body>

</html>

如何理解事件驱动机制对不同浏览器的兼容

如何区分当前浏览器类型?

代码如下：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <script type="text/javascript">

        //"" null false 0 NaN都是false

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

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

                alert("Mozilla(FF),Safari");

            }else{

                alert("IE");

            }

        }else{

            alert("IE6");

        }

    </script>

</head>

<body>

</body>

</html>

一个事件可以被多个函数监听

事件写在前面的会被先调用。

如下例：

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鼠标事件</title>

    <script type="text/javascript">

        function test4(e) {

            window.alert("ok1");

        }

        function test5(e) {

            window.alert("ok2");

        }

    </script>

</head>

<body>

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

</body>

</html>

JavaScript常用事件：

可参考：http://www.w3school.com.cn/jsref/jsref_events.asp及http://www.w3school.com.cn/jsref/dom_obj_event.asp。

下面还是举几个例子吧！

onfocus 元素获得焦点(当光标处在其中时触发) 
<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鼠标事件</title>

    <script type="text/javascript">

        function test6() {

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

        }

    </script>

</head>

<body>

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

</body>

</html>

那么如何使得页面一加载，文本框即获得焦点，这是一个疑问?

window有三个事件

onload 一张页面或一幅图像完成加载
onunload 用户退出页面
onbeforeunload 关闭页面时

如下例：

说明：onload事件在IE9和Chrome浏览器测试通过，onbeforeunload事件在IE9中测试通过，onunload事件均没通过。

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鼠标事件</title>

    <script type="text/javascript">

        function test6() {

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

        }

        function test7() {

            window.alert("onload...");

        }

        function test8() {

            window.alert("onbeforeunload...");

        }

        function test9() {

            window.alert("onunload...");

        }

    </script>

</head>

<body onload="test7()" onbeforeunload="test8()" onunload="test9()">

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

</body>

</html>

js常用事件实例

请使用js完成如下功能：

1、防止用户通过点击鼠标右键菜单copy网页内容

2、当用户试图选中网页文字copy时，给出提示(版权所有，禁止拷贝)

说明：oncontextmenu(IE9、Chrome不支持)，onselectstart(IE9支持，Chrome不支持)

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>鼠标事件</title>

    <script type="text/javascript">

        function test6() {

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

        }

        function test1() {

            window.alert("版权所有，禁止拷贝");

            return false;

        }

        function test2() {

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

            return false;

        }

    </script>

</head>

<body onselectstart="return test1()" oncontextmenu="return test2()">

    请使用js完成如下功能：

    1、防止用户通过点击鼠标右键菜单copy网页内容

    2、当用户试图选中网页文字copy时，给出提示(版权所有，禁止拷贝)<br/>

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

</body>

</html>

JS事件驱动机制的更多相关文章

  1. js 事件驱动机制

    1.浏览器端的事件驱动机制 javascript 在浏览器端运行是单线程的,这是由浏览器决定的,这是为了避免多线程执行不同任务会发生冲突的情况.也就是说我们写的javascript 代码只在一个线程上 ...

  2. Node.JS事件驱动机制

    1.事件驱动程序绑定事件及事件的处理程序 eventEmitter.on('eventName', eventHandler); 我们可以通过程序触发事件 // 触发事件 eventEmitter.e ...

  3. js 事件驱动原理

    还记得当初学JAVA-GUI编程时学习过事件监听机制,此时再学习JavaScript中的事件驱动机制,不免简单.当初学习时也是画过原理图,所以从原理图开始吧! js是采用事件驱动(event-driv ...

  4. node.js零基础详细教程(4)：node.js事件机制、node异步IO操作

    第四章 建议学习时间3小时  课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...

  5. 如何通过setTimeout理解JS运行机制详解

    setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 ? 1 2 3 4 5 console.log(1 ...

  6. Nginx——事件驱动机制(雷霆追风问题，负载均衡)

    事件处理框架 所有的worker进程都在ngx_worker_process_cycle方法中循环处理事件,处理分发事件则在ngx_worker_process_cycle方法中调用ngx_proce ...

  7. 从浏览器多进程到JS单线程，JS运行机制的一次系统梳理

    前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...

  8. JS学习笔记：（三）JS执行机制

    首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...

  9. js 运行机制

    <script> console.log(1) setTimeout(function(){ console.log(3) },0) console.log(2) </script& ...

随机推荐

  1. mousewheel滚轮事件

    原生的滚轮事件:火狐与其他浏览器使用了不同的事件 /* * 滚轮事件只有firefox比较特殊,使用DOMMouseScroll; 其他浏览器使用mousewheel; * */ // firefox ...

  2. UITableView表视图以及重建机制

    表视图UITableView   表视图UITableView,是IOS中最重要的视图,随处可见 表视图通常用来管理一组具有相同数据结构的数据 UITableView继承自UIScrollView,所 ...

  3. MVC4.0 利用IActionFilter实现简单的后台操作日志功能

    首先我们要了解MVC提供了4种常用的拦截器:IActionFilter(Action拦截器接口).IExceptionFilter(异常拦截器接口).IResultFilter(Result拦截器接口 ...

  4. 11.Warning (332060): Node: pi_fck3p was determined to be a clock but was found without an associated clock assignment.

    解释及措施:(1):这个信号是不是你期望的时钟信号?还是被综合器误将普通信号综合成了时钟信号?有没有在代码中用过这个信号的上升沿/下降沿? (2):如果是期望的时钟信号,那么是否有可能调整管脚位置约束 ...

  5. 微软职位内部推荐-Senior Software Engineer -Web

    微软近期Open的职位: Location: Beijing, China The Office App Services team is working on the powerful Office ...

  6. 软件工程实践小队Scrum Meeting

    例会记录 时间:2013年10月20日星期日 Part 1 会议要点: 1. 小组讨论PM.Dev.Test的各自特点: 2. 小组讨论我们的项目网上教学问答系统的相关问题: 3.确定小组成员在第一轮 ...

  7. 团队开发NABC特点

    一.软件特点 我们所设计的躲避小球游戏,能够防止用户沉迷,且不会使用户有挫败感,失去玩游戏的兴趣. 二.进行NABC分析 N:我们适应于用户对娱乐.打发时间需求 A:我们用图形界面实现 B:此游戏适用 ...

  8. CSS3翻转特效；

    CSS代码: *{padding: 0;margin: 0;} .container{width: 90%;padding: 5%;height: 12rem;display: flex;justif ...

  9. 微软Hololens学院教程-Hologram 220-空间声音（Spatial sound ）【本文是老版本，与最新的微软教程有出入】

    这是老版本的教程,为了不耽误大家的时间,请直接看原文,本文仅供参考哦! 原文链接https://developer.microsoft.com/EN-US/WINDOWS/HOLOGRAPHIC/ho ...

  10. PHP实现简单的学生信息管理系统（web版）

    (∩_∩) 1.概述 学了php的一些基础,包括HTML,php,pdo,mysql操作等,一直都没有将它们有机结合.最近写了一个简单的网页版学生信息管理系统,前台用HTML,脚本用到了JavaScr ...