js是采用事件驱动来响应用户操作的。比如通过鼠标或者按键(基本等同于热键)在浏览器窗口或者网页元素(按钮,文本框…)上执行的操作,我们称之为事件。由鼠标或热键引发的一连串程序的动作,称之为事件驱动。对事件进行处理程序或函数,我们称之为事件处理程序(也有教材上说是事件句柄)。
事件的分类(有的地方说是事件源分类法分出的,这个个人不赞同,两个是不同的东西怎么可以这么搞):
鼠标事件:
当用户在页面上用鼠标点击页面元素时,对应的dom节点会触发鼠标事件,主要有click、dblclick、mousedown、mouseout、mouseover、mouseup、mousemove等。
键盘事件:
当用户用键盘输入信息时,会触发键盘操作事件。主要包括keydown、keypress、keyup三个。
HTML事件:
在html节点加载变更等相关的事件,比如window的onload、unload、abort、error,文本框select、change等等。
其它事件:
页面中一些特殊对象运行过程中产生的事件,比如xmlhttprequest对象的相关事件。
举个鼠标点击事件的例子:
(
补充说明:
event.type属性表示事件类型。
event.currentTarget是事件处理程序当前正在处理事件的那个元素,返回绑定事件的元素,和this的作用差不多,始终返回绑定事件的元素。(事件委托返回绑定的父元素)
event.target返回触发事件的元素(可以用来事件委托)
event.clientX或者event.clientY表示相应坐标(设置了宽高的元素才可以包括body)
event只是形式参数而不是具体的变量,要根据传递的参数进行修改
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript">
function test(e){
document.writeln("<br>X:"+e.clientX+"<br>Y:"+e.clientY);
}
</script>
</head>
<body style="width: 1000px; height: 1000px;
border: 1px solid red" onclick="test(event)">
</body>
</html>
以上代码的作用是,在鼠标按下后,弹出窗口显示x、y的坐标。
运行结果:
js事件驱动判定元素的方法:
通过向调用函数传递this指针的方法(学C的人一般爱这么叫)
举个例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script language="JavaScript">
// function test(e){
// document.writeln("<br>X:"+e.clientX+"<br>Y:"+e.clientY);
// }
function changeDivColor(e){
if( e.value == "黄色" ) {
//获取div1
var div1 = document.getElementById("div1");
div1.style.background = "yellow";
} else if( e.value == "红色" ) {
var div1 = document.getElementById("div1");
div1.style.background = "red";
}
}
</script>
</head>
<body style="width: 1000px; height: 1000px;
border: 1px solid red" onclick="test(event)">
<div id="div1" style="width: 400px; height: 300px; background: white;">
<input id="changToRedButton" value="红色" type="button" onclick="changeDivColor(this)">
<input id="changToYellowButton" value="黄色" type="button" onclick="changeDivColor(this)">
</div>
</body>
</html>
产生的效果是:点击对应图片改变div的颜色
这个时候有人问大多数CSS是专门放在外部CSS文件里面的,这个方法用不了,这个时候下个方法就起作用。
访问外部定义的CSS样式(类定义的CSS样式)
举个例子:
文件如下:
.style1 {
width: 1000px;
height: 800px;
background: white;
}
html文件如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="../static/css/controlledCss.css" />
<script language="JavaScript">
// function test(e){
// document.writeln("<br>X:"+e.clientX+"<br>Y:"+e.clientY);
// }
function changeDivColor(e){
if( e.value == "黄色" ) {
//获取div1
var div1 = document.getElementById("div1");
div1.style.background = "yellow";
} else if( e.value == "红色" ) {
var div1 = document.getElementById("div1");
div1.style.background = "red";
}
}
function changeDivColor2(e){
//获取mycss.css中所有class选择器
var ocssRules = document.styleSheets[0].cssRules;//或xxx.rules
//从ocssRules中取出你希望的class
//ocssRules[0]:这里的0表示mycss.css文件中的一个样式规则
var style1 = ocssRules[0];
window.alert("进入了");
if( e.value == "黄色" ) {
style1.style.background = "yellow";
} else if( e.value == "红色" ) {
style1.style.background = "red";
}
}
</script>
</head>
<body style="width: 1000px; height: 1000px;
border: 1px solid red">
<!-- οnclick="test(event)"--> //移动至body里面触发坐标函数
<div id="div1" style="width: 400px; height: 300px; background: white;">
<input id="changToRedButton" value="红色" type="button" onclick="changeDivColor(this)">
<input id="changToYellowButton" value="黄色" type="button" onclick="changeDivColor(this)">
</div>
<div id="div2" class="style1">
<input id="changToRedButton2" value="红色" type="button" onclick="changeDivColor2(this)">
<input id="changToYellowButton2" value="黄色" type="button" onclick="changeDivColor2(this)">
</div>
</body>
</html>