JS事件驱动编程
JS事件
1. 概述
JS是采用 事件驱动(event-driven) 响应用户操作的.
1) 事件(Event)
如, 点击按钮 按键 等 都称之为 ~.
2) 事件源
① 网页元素(按钮, 输入框, 文本域, ...)
② 浏览器窗口
③ 其他
3) 事件处理程序(Event Handler)
对事件进行处理的程序或函数,称之为 ~.
4) 事件驱动(Event Driven)
由点击按钮或按键引发的一连串程序的动作, 称之为 ~.
2. 事件处理机制
在事件源上发生某个事件,产生某个效果
即,
鼠标点击按钮,
发生一个点击事件, 并产生一个事件对象
该事件触发一个函数的执行.
1) 原理
如图visio
2) 说明
① 事件源
② 事件名称
如, 鼠标移动 鼠标按下,
单击按钮
网页加载, 网页关闭
输入框内容改变
等
③ 事件处理程序
通常为函数, 通过发生的事件来驱动函数执行
④ 事件对象
当某个事件发生时, 会产生一个描述该事件的对象.
该对象包含该事件的一些详细信息,
如, 按键时 会记录按下的是哪个键.
3. 事件及分类
参考:
http://www.w3school.com.cn/js/jsref_events.asp
http://www.w3school.com.cn/htmldom/dom_obj_event.asp
1) 鼠标事件
当用户在页面上用鼠标点击页面元素时,
对应的dom结点会触发鼠标事件.
主要有:
① click
② dbclick
③ mousedown
④ mouseup
⑤ mouseover
⑥ mouseout
⑦ mousemove
⑧ 等...
2) 键盘事件
当用户用键盘输入信息时, 会触发键盘操作事件.
主要有:
① keydown
② keypress
③ keyup
3) HTML事件
在html结点加载变更等相关事件, 如:
window的
onload, unload, abort, error
文本框的
select, change
4) 其它事件
页面中一些特殊对象运行过程中产生的事件,
如 XmlHttpRequest对象的相关事件.
4. 示例
1) 获取鼠标点击坐标
<body onmousedown="recordMouse(event)"> <!-- onmousemove="recordMouse(event)" --> </body>
//-----------
/*
1. 事件源 --> body (注: Firefox不支持在body上的mousedown)
2. 事件 --> mousedown
3. 事件处理处理程序 --> recordMouse(evt)
4. 在事件源上 绑定 事件处理程序
<body onmousedown="recordMouse(event)">
*/
var count = 0;
function recordMouse(evt) {
console.info( evt );
console.info(
"鼠标点击次数: " + (++count) + " " +
"坐标: ( " + evt.clientX + ", " + evt.clientY + ")"
);
}
2) 点击按钮获取当前时间
<button onclick="showCurrentTime(event)">showCurrentTime</button>
/*
1. 事件源 --> button
2. 事件 --> click
3. 事件处理程序--> showCurrentTime(evt)
4. 在事件源上 绑定 事件处理程序
<button onclick="showCurrentTime(event)">
*/
function showCurrentTime(evt) {
console.info( new Date().toLocaleString() );
}
3) 按钮改变div的背景色
<div style="width:200px;height:200px;background-color: gray;">
<input type="button" value="red" onclick="changeColor(this)"/>
<input type="button" value="blue" onclick="changeColor(this)"/>
</div>
/*
1. 事件源 --> input
2. 事件 --> click
3. 事件处理程序--> changeColor(element)
4. 在事件源上 绑定 事件处理程序
<input type="button" value="red" onclick="changeColor(this)"/>
5. 同一事件确定是哪个事件源
this
*/
function changeColor(element) {
// console.info(element);
// 获取父节点 div
var divObj = element.parentElement;
// 获取input元素的值
var color = element.value;
// 通过外部方式更div 的style
divObj.style.backgroundColor = color;
}
5. 更改元素的class属性值
<div class="divCls-default">
<input type="button" value="red"
onclick="changeCss(this,'divCls-little')"/>
<input type="button" value="blue"
onclick="changeCss(this,'divCls-big')"/>
</div>
<style type="text/css">
.divCls-default {
width: 200px;
height: 200px;
background-color: gray;
}
.divCls-little {
width: 100px;
height: 100px;
background-color: green;
}
.divCls-big {
width: 300px;
height: 300px;
background-color: blue;
}
</style>
<script type="text/javascript" charset="utf-8">
var cssFiles = document.styleSheets; // 集合
console.info( cssFiles );
var rules = cssFiles[0].cssRules; // 集合
console.info( rules );
function changeCss(element, clsName) {
var divElement = element.parentElement;
// 更改div的class
divElement.className = clsName;
}
</script>
6. 更改外部css文件中的规则
① 获取样式表文件的集合
var cssFiles = document.styleSheets;
② 获取样式表文件里的规则集合
// firefox
var rules = cssFiles[0].cssRules;
// IE
var rules = cssFiles[0].rules;
③ 更改指定规则的属性
rules[0].style.backgroundColor = "red";
.divCls-default {
width: 200px;
height: 200px;
background-color: gray;
}
<link rel="stylesheet" type="text/css" href="my.css"/>
<div class="divCls-default">
<input type="button" value="red"
onclick="changeCss(this)"/>
<input type="button" value="blue"
onclick="changeCss(this)"/>
</div>
<script type="text/javascript" charset="utf-8">
var cssFiles = document.styleSheets; // 集合
console.info( cssFiles );
var rules = cssFiles[0].cssRules; // 集合
console.info( rules );
function changeCss(element) {
var color = element.value;
var divElement = element.parentElement;
var defaultCls = rules[0];
defaultCls.style.backgroundColor = color;
}
</script>
7. 区分浏览器种类
<script type="text/javascript">
if ( window.XMLHttpRequest ) { // Mozilla Safari IE7/8
if ( window.ActiveXObject ) {
alert( "IE version > 6" );
} else {
alert( "Mozilla or Safari" );
}
} else {
alert( "IE version = 6" );
}
</script>