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

最新推荐文章于 2024-09-12 16:43:23 发布

萧亦全

最新推荐文章于 2024-09-12 16:43:23 发布

阅读量713

点赞数

分类专栏： javascript笔记文章标签：前端 javascript

本文链接：https://blog.csdn.net/a123456zabc/article/details/50917295

版权

javascript笔记专栏收录该内容

11 篇文章 0 订阅

订阅专栏

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 οnmοusedοwn="test(event)">

	</body>
</html>

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

<html>
	<head>
		<script type="text/javascript">
			function test () {
				window.alert(new Date());
			}
		</script>
	</head>

	<body>
		<input type="button" value="显示当前时间" οnclick="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="快来点我呀！" οnclick="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="黑色" οnclick="test(this)"/>
		<input type="button" value="红色" οnclick="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="黑色" οnclick="test(this)"/>
		<input type="button" value="红色" οnclick="test(this)"/>
	</body>
</html>