JS事件驱动机制
还记得当初学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事件驱动机制的更多相关文章
- js 事件驱动机制
1.浏览器端的事件驱动机制 javascript 在浏览器端运行是单线程的,这是由浏览器决定的,这是为了避免多线程执行不同任务会发生冲突的情况.也就是说我们写的javascript 代码只在一个线程上 ...
- Node.JS事件驱动机制
1.事件驱动程序绑定事件及事件的处理程序 eventEmitter.on('eventName', eventHandler); 我们可以通过程序触发事件 // 触发事件 eventEmitter.e ...
- js 事件驱动原理
还记得当初学JAVA-GUI编程时学习过事件监听机制,此时再学习JavaScript中的事件驱动机制,不免简单.当初学习时也是画过原理图,所以从原理图开始吧! js是采用事件驱动(event-driv ...
- node.js零基础详细教程(4)：node.js事件机制、node异步IO操作
第四章 建议学习时间3小时 课程共10章 学习方式:详细阅读,并手动实现相关代码 学习目标:此教程将教会大家 安装Node.搭建服务器.express.mysql.mongodb.编写后台业务逻辑. ...
- 如何通过setTimeout理解JS运行机制详解
setTimeout()函数:用来指定某个函数或某段代码在多少毫秒之后执行.它返回一个整数,表示定时器timer的编号,可以用来取消该定时器. 例子 ? 1 2 3 4 5 console.log(1 ...
- Nginx——事件驱动机制(雷霆追风问题，负载均衡)
事件处理框架 所有的worker进程都在ngx_worker_process_cycle方法中循环处理事件,处理分发事件则在ngx_worker_process_cycle方法中调用ngx_proce ...
- 从浏览器多进程到JS单线程，JS运行机制的一次系统梳理
前言 见解有限,如有描述不当之处,请帮忙及时指出,如有错误,会及时修正. ----------超长文+多图预警,需要花费不少时间.---------- 如果看完本文后,还对进程线程傻傻分不清,不清楚浏 ...
- JS学习笔记：（三）JS执行机制
首先我们先明确一点:JavaScript是一门单线程语言.单线程也就是说同一时间只能执行一个任务,所有的任务都必须排队顺序执行.那么如果一个任务耗时很长,阻塞了其它任务的执行,就会给用户造成不友好的体 ...
- js 运行机制
<script> console.log(1) setTimeout(function(){ console.log(3) },0) console.log(2) </script& ...
随机推荐
- hdu 4417 Super Mario/树套树
原题链接:http://acm.hdu.edu.cn/showproblem.php?pid=4417 题意很简单,给定一个序列求一个区间 [L, R,]中小于等于H的元素的个数. 好像函数式线段树可 ...
- mysql数据库编码设置成utf-8，避免出现乱码
设置默认编码为utf8:set names utf8;设置数据库db_name默认为utf8:ALTER DATABASE `db_name` DEFAULT CHARACTER SET utf8 C ...
- Qt的QTabelWidget
QTableWidget的用法总结 http://blog.csdn.net/zb872676223/article/details/39959061 [Qt]在QTableWidget中添加QCh ...
- 读Windows编程
1.Windows是一个消息驱动系统.它通过把消息投入应用程序消息队列中或者把消息发送给合适的窗口消息处理程序,将发生的各种事件通知给应用程序 2.尽管一个动态链接库模块可能有其它扩展名(如.EXE或 ...
- JAVA类与对象（九）------多态
多态是同一个行为具有多个不同表现形式或形态的能力.多态性是对象多种表现形式的体现. 多态存在的三个必要条件: 继承 重写 父类引用指向子类对象 例:Parent p = new Child(); 当使 ...
- 随堂作业——到底有几个“1”（C++）
一.设计思路 在课堂上讨论的时候,老师提出的思路是利用之前的结果计算出比它更大的数字的“1”.但是我不是这么想的,我是把输入的正整数每位上的数都分解出来计算.如abc,就先算c,再加上b,最后再加上a ...
- URAL 1920 Titan Ruins: the Infinite Power of Magic
大意: 有一张N*N的网格,你每次可以走一步,每格只能走一次,有没有一种方法让走了L步后回到一个距原点1步远的格子? 没有输出Unsuitable device,否则输出Overwhelming p ...
- C实现面向对象封装、继承、多态
参考资料: http://blog.chinaunix.net/uid-26750235-id-3102371.html http://www.eventhelix.com/rea ...
- bzoj 3039 悬线法求最大01子矩阵
首先预处理每个F点左右,下一共有多少个F点,然后 对于每个为0的点(R),从这个点开始,一直到这个点 下面第一个R点,这一区间中的min(左),min(右)更新答案. ps:我估计这道题数据有的格式不 ...
- Java内存模型(JMM)
参考: 1. http://www.tuicool.com/articles/UVzuQb