韩顺平 javascript教学视频_学习笔记22_js事件驱动机制_js事件分类_js访问css技术

最新推荐文章于 2022-06-11 12:35:14 发布

D计划

最新推荐文章于 2022-06-11 12:35:14 发布

阅读量1.3k

点赞数

分类专栏： Javascript 学习笔记文章标签： javascript 视频韩顺平学习笔记

本文链接：https://blog.csdn.net/fuyizhonhong/article/details/50602268

版权

Javascript 学习笔记专栏收录该内容

39 篇文章 0 订阅

订阅专栏

js事件驱动编程
js事件

学习目标：

充分理解js的事件驱动机制
掌握js中常用的事件

js事件驱动机制----概述

js是采用事件驱动（event-driven）响应用户操作的。

比如通过鼠标或按键在浏览器窗口或者网页元素（按钮，文本框。。）上执行的操作，我们称之为事件（event）。

有鼠标或热键引发的一连串程序的动作，称之为事件驱动（event-driver）。

对事件进行处理的程序或函数，称之为事件处理程序（event-handler）。

分析：

入门案例

案例1，监听鼠标点击事件，并能够显示鼠标点击的 x，y

<html>  
	<head>  
		<script language="javascript">  
			
			function test1(e){
				
				window.alert("x="+e.clientX+" Y="+e.clientY);
			}
			
			function test2(e){
				
				document.writeln("x="+e.clientX+" Y="+e.clientY);
				
			}
		
		</script>  
		
	</head>  
	<body οnmοusedοwn="test1(event)" οnmοusemοve="test2(event)">
	</body>  
</html>

js事件驱动机制----事件（对象）分类

js的事件分类在帮助文档里有详细的说明，如下图所示：

将上面的这么多事件分为四大类：

js事件驱动机制----如何理解

如何理解js的事件驱动机制，下面再来看两个案例，也就是上面的两个例子：

event1.html

<html>  
	<head>  
		<script language="javascript">  
			
			function test3(e){
				
				var date = new Date();
				window.alert(date.toLocaleString());
				
			}
		
		</script>  
		
	</head>  
	<body >
	<input type="button" οnclick="test3()" value="显示当前时间"/>
	</body>  
</html>

event2.html

<html>  
	<head>  
		<script language="javascript">  
 
		//js如何访问元素的style属性，进行样式修改
			function test4(eventObj){
				//怎么知道是 黑色 按钮按下还是 红色按钮按下
				//window.alert(eventObj.value);
				 if(eventObj.value=="黑色"){
					//window.alert(eventObj.value);
					var div1=document.getElementById('div1');
					//window.alert(div1.style.width);
					div1.style.width="450px";
					
					div1.style.backgroundColor="black"; //这里修改颜色，不能写background-color，而是backgroundColor
				
				} else if(eventObj.value=="红色"){
					
					var div1=document.getElementById("div1");
					//window.alert(div1.style.width);
					div1.style.backgroundColor="red";
				
				} 
				
			}
		
		</script>  
		
	</head>  
	<body > 
	<!-- 如何通过修改style来改变style -->
	<div id="div1" style="width:400px;height:300px;background-color:red" >div1</div>
	<input type="button" value="黑色" οnclick="test4(this)"/><!-- 这里的this就是当前button对象 -->
	<input type="button" value="红色" οnclick="test4(this)"/>
	</body>  
</html>

上面event2.html的代码是通过修改style属性来改变style属性的，下面我们来看一下如何通过js访问外部定义的CSS样式（类定义的CSS样式）来动态的修改页面。

首先来定义一个CSS文件：

.style1{
	width:500px;
	height:200px;
	background-color:red;
}

再看html文件：

<html>  
	<link rel="stylesheet" type="text/css" href="mycss.css" />  
	<link rel="stylesheet" type="text/css" href="mycss2.css" />  
	<head>  
		<script language="javascript">  
 
			function test4(eventObj){
				
				//获取mycss.css 中所有的class选择器
				//styleSheets[0];这里的0表示当前文件中引用的第一个css文件
				//如果是获取mycss2.css中所有的class选择器，则应写成styleSheets[1]
				var ocssRules = document.styleSheets[0].rules||document.styleSheets[0].cssRules;

				//先取得定义类的样式表的引用，用document.styleSheets集合实现这个目的，这个集合包含HTML页面中所有的样式表
                //DOM为每个样式表定义一个cssRules的集合，这个集合中包含定义在样式表中的所用的CSS规则，CSS规则中的类选择器从开始到结尾依次为0，1，2......;
                //注意：Mozilla和Safari中是cssRules，而IE中式rules

				//从ocssRules中取出你希望的class选择器
				var style1=ocssRules[0]; 	
							
				if(eventObj.value=="黑色"){
					
					style1.style.backgroundColor="black"; //这里修改颜色，不能写background-color，而是backgroundColor
				
				} else if(eventObj.value=="红色"){
					
					style1.style.backgroundColor="red";
				
				} 
				
			}
		
		</script>  
		
	</head>  
	<body > 
	<!-- 定义一个class选择器 -->
	<div id="div1" class="style1">div1</div>
	<input type="button" value="黑色" οnclick="test4(this)"/><!-- 这里的this就是当前button对象 -->
	<input type="button" value="红色" οnclick="test4(this)"/>
	</body>  
</html>

上面代码的注释已经比较详细的解释了

js访问外部定义的CSS样式（类定义的CSS样式），不能使用上面的通过修改style属性来改变style属性的方法去访问，因为CSS数据不是存储在style属性中，它是存储在类中的。

那么访问外部定义的CSS样式文件的方法是：先取得定义类的样式表的引用，用document.styleSheets集合实现这个目的，这个集合包含HTML页面中所有的样式表，DOM为每个样式表定义一个cssRules的集合，这个集合中包含定义在样式表中的所用CSS规则。具体案例就详细看上面的代码。

（注意：Mozilla和Safasi中是cssRules，而IE中式rules）。

从上面的注意中看到，在火狐浏览器和IE浏览器中，DOM提供的样式表集合是不一样的，那么如何判断自己当前的浏览器是什么类型的呢？

使用下面的代码：

<html>  
	<head>  
		<script language="javascript">  
 
			//如何区分当前浏览器是什么类型
			if(window.XMLHttpRequest){
					
				if(!window.ActiveXObject){
					alert("Mozilla,Safari,IE11");
				}else {
					alert("这是IE");
				}	
			}else {
				alert("这是IE6或IE6以下版本");
			}
		</script>  
		
	</head>  
	<body > 
	</body>  
</html>