/*事件驱动*/
//事件主要分为四类, 事件源代表的是事件发生的地方
例1: 监听鼠标点击时间，并输出鼠标点击的坐标(事件源是body, 在body内点击才能响应)
<!DOCTYPE html>
<html>
<head>
……
<script>
function show(e){
var x = e.clientX;
var y = e.clientY;
alert(x+ " " + y);
}
</script>
</head>
<body onmousedown="show(event)" style="width: 600px; height: 500px">
<div style="width: 600px; height: 500px; background-color: pink"></div>
</body>
</html>
例2: 监听鼠标移动(只要鼠标移动到body内, 就会弹窗)
<!DOCTYPE html>
<html>
<head>
……
<script>
function show(e){
alert("什么鬼");
}
</script>
</head>
<body onmousemove="show(event)" style="width: 600px; height: 500px">
<div style="width: 600px; height: 500px; background-color: pink"></div>
</body>
</html>
例3: 监听按钮显示时间
<!DOCTYPE html>
<html>
<head>
……
<script>
function show(){
var date = new Date();
alert(date.toLocaleString());
}
</script>
</head>
<body style="width: 600px; height: 500px">
<div style="width: 600px; height: 500px; background-color: pink">
<input type="button" value="当前时间" style="margin-top: 250px; margin-left: 230px" onclick="show()"/>
</div>
</body>
</html>
例4: 通过时间驱动改变内部style, 比如改变按钮的value
<!DOCTYPE html>
<html>
<head>
……
<script>
function change(obj){
alert(obj.value);
if(obj.value == "黑色")
obj.value = "红色";
else
obj.value = "黑色";
}
</script>
</head>
<body style="width: 600px; height: 500px">
<div style="width: 600px; height: 500px; background-color: pink">
< !-- onclick="change(this)", 这个this就相当于传入了按钮对象 -->
<input type="button" value="黑色" style="margin-top: 250px; margin-left: 230px" onclick="change(this)"/>
</div>
</body>
</html>
例5: 改变div的背景色
<script>
function change(obj){
var d = document.getElementById("d1");
if(obj.value == "红色")
d.style.backgroundColor = "red"; //注意背景色这个属性名在JS里是backgroundColor, 在CSS里是background-color
else
d.style.backgroundColor = "black";
}
</script>
</head>
<body style="width: 600px; height: 500px">
<div id="d1" style="width: 600px; height: 500px; background-color: pink">
<input type="button" value="红色" style="margin-top: 250px; margin-left: 220px" onclick="change(this)"/>
<input type="button" value="黑色" style="margin-top: 250px; margin-left: 0px" onclick="change(this)"/>
</div>
</body>
</html>
初始状态
点击红色按钮
点击黑色按钮
