夜光序言：
红尘潇洒，独自前行，但尽人事，莫问前程。
正文：
JS 事件三要素
事件三要素
把灯打开要做这样的事情：
我们用我们的手 去按一下开关 灯亮了
事件源：手【去触发，用手去触发，名词】
事件：按【怎么触发，动词】
事件处理程序：灯亮了【发生了什么】
事件源
发起者
要触发的对象， 一般情况下是名词
事件
怎么触发这个事情 一般情况下动词
事件处理程序
发生了什么事 灯亮了
事件三要素：
1：事件源： 三藏【名词】
2：事件： 念【动词】
3：事件处理程序： 悟空头疼【发生了什么】
案例1：
1：事件源： X 盒子【名词】
2：事件： 点击【动词】
3：事件处理程序： 关闭
总结： 事件源.事件=function(){ 事件处理函数}
活学活用：
JS点击按钮实现改变宽度
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#black{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="black"></div>
<button>改变宽度</button>
</body>
</html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#black{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="black"></div>
<button id="black01">改变宽度</button>
<script>
//要操作先找人
var black=document.getElementById("black"); //获得id为black的盒子
var black01=document.getElementById("black01");
//时间三要素
/* 事件源.事件=function(){}*/
black01.
</script>
</body>
/* 事件源.事件=function(){}*/
事件：
1：onclick 鼠标单击
2:ondblclick 鼠标双击
3:onkeyup 按下并且释放键盘上的一个按键时触发
4:onchange 文本内容或者下拉菜单选项发生改变
5:onfocus 获得焦点
6:onblur 失去焦点
7:onmouseover 鼠标悬停
8:onmouseout 鼠标移出
9:onload 网页文档加载时
10:onunload 关闭网页时
11:onsubmit 表单提交事件
12:onreset 重置表单时
嘿嘿：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
#black{
width: 200px;
height: 200px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="black"></div>
<button id="black01">改变宽度</button>
<script>
//要操作先找人
var black=document.getElementById("black"); //获得id为black的盒子
var black01=document.getElementById("black01");
//时间三要素
/* 事件源.事件=function(){}*/
black01.onclick=function(){
black.style.width="400px";
black.style.height="400px";
}
</script>
</body>
</html>
// 帅气
// 多练练
关闭京东topbanner
隐藏样式：
Display:none; display:block //显示的意思
Visibility:hidden; visibility:visible // 显示的意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 100px;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
</body>
</html>
//下图 上下两个盒子
<style>
div{
width: 200px;
height: 200px;
background-color: aquamarine;
margin: 100px;
}
.one{
display: none; // 隐藏不占位置 visibility 隐藏占据位置
}
</style>
加了引号的肯定不是变量~~
现在很多网站都有ID这个属性，方便噢
嘿嘿
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>特技</title>
</head>
<body>
<img src="1.jpg" id="k1"/>
<script>
var k1=document.getElementById("k1");
k1.onmouseover=function(){
k1.src="2.jpg";
};
k1.onmouseout=function(){
k1.src="3.jpg";
}
</script>
</body>
</html>
//实现图片鼠标滑动切换