<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>JavaScript事件</title>
<style>
body {
background: #333;
}
.box {
width: 100px;
margin: 200px auto 0;
text-align: center;
cursor: pointer;
}
.ball {
width: 100px;
height: 100px;
background: rgba(255, 255, 255, 0.3);
border-radius: 50%;
box-shadow: 0 0 20px #111;
}
p {
margin-top: 50px;
color: rgba(255, 255, 255, 0.5);
text-shadow: 0 6px 3px #999;
}
</style>
</head>
<body>
<div class = "box">
<div class = "ball"></div>
<p>点击开灯</p>
</div>
</body>
<script src = "https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script>
var body = document.getElementsByTagName('body')[0];
var box = document.getElementsByClassName('box')[0];
var ball = document.getElementsByClassName('ball')[0];
var text = document.getElementsByTagName('p')[0];
box.onclick = function () {
if (body.style.backgroundColor != 'rgb(238, 238, 238)') {
body.style.backgroundColor = 'rgb(238, 238, 238)';
ball.style.boxShadow = '0 0 100px yellow';
text.innerText = '点击关灯';
text.style.color = '#999';
} else {
body.style.backgroundColor = '#333';
// 请问老师：下面为什么打印出来是 rgb(51, 51, 51) ，不是 #333 ？
// console.log(body.style.backgroundColor);
ball.style.boxShadow = '0 0 20px #111';
console.log(text);
text.innerText = '点击开灯';
text.style.color = 'rgba(255, 255, 255, 0.5)';
}
}
/*
常用事件
下面是一个属性列表，这些属性可以插入HTML标签来定义事件动作
属性 描述
onload 一张页面或一幅图像完成加载
onfocus 元素获得焦点
onblur 元素失去焦点
onchange 域的内容被改变
onsubmit 确认按钮被点击
onclick 点击时
ondblclick 双击时
onkeydown 某个键盘按键被按下
onkeyup 某个键盘按键被松开
onkeypress 某个键盘按键被按下并松开
onmousedown 鼠标按钮被按下
onmouseup 鼠标按键被松开
onmousemove 鼠标被移动
onmouseover 鼠标移动到某元素之上
onmouseout 鼠标从某元素移开
*/
</script>
</html>
