第八章：JavaScript事件驱动编程和访问CSS技术

来源：互联网发布：国泰君安网络金融部编辑：程序博客网时间：2024/06/05 19:19

1.JS事件驱动

JS是采用事件驱动响应用户操作的，比如通过鼠标或者按键在浏览器窗口或者网页元素（按钮、文本框...）上执行的操作，我们称之为时事件，由鼠标或热键引发的一连串程序的动作，称之为事件驱动，对时间进行处理的程序或函数，我们称之为事件处理程序（同一个事件的处理程序可以有多个），一般来说当一个事件发生时，会产生一个描述该事件的具体对象，该对象包含了该事件的一些详细信息。事件的分类如下：

鼠标事件：当用户在页面上用鼠标点击页面元素时，对应的dom节点会触发鼠标事件，主要有：click、dbclick、mousedown、mouseout、mouseover、mouseup、mousemove等；
键盘事件：当用户用键盘输入信息时，会触发键盘操作事件，主要包括keydown、keypress、keyup三个；
HTML事件：在HTML节点加载变更等相关的事件，比如window的onload、unload、abort、error，文本框的select、change等；
其他事件：页面中一些特殊对象运行过程中产生的事件，比如xmlhttprequest对象的相关事件。

下面的程序当鼠标点击窗体是，显示鼠标点击处的X、Y坐标：

<html><head><script type="text/javascript">function test (e) {window.alert("X = "+e.clientX+" Y = "+e.clientY);}</script></head><body onmousedown="test(event)"></body></html>

下面的程序当鼠标点击按钮时，显示当前时间：

<html><head><script type="text/javascript">function test () {window.alert(new Date());}</script></head><body><input type="button" value="显示当前时间" onclick="test()"/></body></html>

同一个事件可以被多个事件处理程序监听，中间用逗号隔开即可，那个监听在前，就先执行那个：

<html><head><script type="text/javascript">function testOne () {window.alert("okOne");}function testTwo() {window.alert("okTwo");}</script></head><body><input type="button" value="快来点我呀！" onclick="testTwo(),testOne()"/></body></html>

2.JS访问CSS技术

访问元素中style属性的CSS样式：
这个可以直接使用style对象方便的访问：

<html><head><script type="text/javascript">function test(eventObj) {if(eventObj.value=="黑色"){var divOne = document.getElementById("divOne");divOne.style.backgroundColor="black";}else if(eventObj.value=="红色"){var divOne = document.getElementById("divOne");divOne.style.backgroundColor="red";}}</script></head><body><div id="divOne" style="width:400px;height:300px;background-color:red"></div><input type="button" value="黑色" onclick="test(this)"/><input type="button" value="红色" onclick="test(this)"/></body></html>

访问外部定义的CSS样式：

先取得样式表的引用，用document.styleSheets集合实现这个目的，这个集合包含HTML页面中所有的样式表，DOM为每个样式表定义了一个cssRules的集合（在Mozilla和Safari中是cssRules，而IE中是rules），这个集合中包含定义在样式表中的所有CSS规则：

CSS文件：

#divOne{width: 600px;height: 400px;background-color: black;}

HTML文件：

<html><head><link rel="stylesheet" type="text/css" href="test.css"><script type="text/javascript">function test(eventObj) {var ocssRules=document.styleSheets[0].rules;var styleOne=ocssRules[0];if(eventObj.value=="黑色"){styleOne.style.backgroundColor="black";}else if(eventObj.value=="红色"){styleOne.style.backgroundColor="red";}}</script></head><body><div id="divOne"></div><input type="button" value="黑色" onclick="test(this)"/><input type="button" value="红色" onclick="test(this)"/></body></html>

0 0