事件
"""
HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表，这些属性可插入 HTML 标签来定义事件动作。
"""
常用的一些事件
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
案例一：切换头像案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<title>change head</title>
<style>
body {
margin: 0;
}
#d1 {
height: 350px;
350px;
border-radius: 50%;
}
.bg_img2 {
background-image: url("head2.jpg");
100%;
}
.bg_img1 {
background-image: url("head1.jpg") ;
100%;
}
</style>
</head>
<body>
<div id="d1" class="c1 bg_img1 bg_img2"></div>
<button id="d2">点我</button>
<script>
let divEle = window.document.getElementById('d1');
let btnEle = window.document.getElementById('d2');
btnEle.onclick = function () {/*绑定鼠标点击事件*/
/*动态修改div的属性*/
divEle.classList.toggle('bg_img1');
}
</script>
</body>
</html>
案例二：input框获取失去焦点案例
<input type="text" id="d1" name="text" value="老板~来吗"/>
<script>
let inputEle = window.document.getElementById('d1');
inputEle.onfocus = function () { /*获取焦点事件*/
inputEle.value = '';
};
inputEle.onblur = function () { /*失去焦点事件*/
inputEle.value = '(๑‾ ꇴ ‾๑)好哒，你先定个房间~';
};
</script>
案例三：实时展示当地时间
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<title>show local time</title>
</head>
<body>
<input type="text" id="d1" style="display: block;height: 30px; 120px">
<button id="d2">start</button>
<button id="d3">end</button>
<script>
let year, month, date, hour, minute, second, timeString, t = null;
let inputEle = window.document.getElementById('d1');
let startBtnEle = window.document.getElementById('d2');
let endBtnEle = window.document.getElementById('d3');
function showTime() {
let currentTime = new Date();
year = currentTime.getFullYear();
month = currentTime.getMonth();
date = currentTime.getDate();
hour = currentTime.getHours();
minute = currentTime.getMinutes();
second = currentTime.getSeconds();
timeString = [`${year}`, `${month}`, `${date}`].join('/') + ' ' + [`${hour}`, `${minute}`, `${second}`].join(':');
inputEle.value = timeString;
}
startBtnEle.onclick = function () {
// 限制定时器只能开一个
if (!t) {
t = setInterval(showTime,1000);// 每点击一次就会开设一个定时器 而t只指代最后一个
}
};
endBtnEle.onclick = function () {
clearInterval(t);
// 还应该将t重置为空
t = null;
};
</script>
</body>
</html>
案例四：省市联动
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" charset="UTF-8">
<title>省市联动</title>
</head>
<body>
<select name="province" id="d1">
<option value="" selected disabled>请选择省份~</option>
</select>
<select name="city" id="d2">
<option value="" selected disabled>请选择市~</option>
</select>
<script>
let pEle = window.document.getElementById('d1');
let cEle = window.document.getElementById('d2');
dataInfo = {
"江苏": ["南京", "苏州", "泰州"],
"浙江": ["杭州", "宁波", "温州"],
"上海": ["浦东", "杨浦", "黄埔"],
"广东": ["广州", "深圳", "茂名"],
"北京": ["朝阳", "海淀", "昌平"],
};
for (let key in dataInfo) {
//创建option标签
let optEle = window.document.createElement('option');
//设置文本以及value
optEle.value = optEle.innerText = key;
//将option标签加入到select标签域中
pEle.appendChild(optEle);
}
//文本域发生变化事件
pEle.onchange = function () {
//获取到选择的省份
let proSelect = pEle.value;
//获取对应的市信息
let cityList = dataInfo[proSelect];
//清空所有的市选项
cEle.innerHTML = null;
for (let i = 0; i < cityList.length; i++) {
//创建option标签
let optEle = window.document.createElement('option');
//设置文本以及value
optEle.value = optEle.innerText = cityList[i];
//将option标签加入到select标签中
cEle.appendChild(optEle)
}
}
</script>
</body>
</html>
window.onload
"""
当我们给页面上的元素绑定事件的时候，必须等到文档加载完毕。因为我们无法给一个不存在的元素绑定事件。
window.onload事件在文件加载过程结束的时候触发。此时，文档中的所有对象都位于DOM中，并且所有图像，脚本，链接和子框架都已完成加载。
"""
action: onload()函数存在覆盖现象。