1. 事件：用户点html的标签触发js的函数，意思是点标签触发一个动作。
1.1 常用事件：onclick、ondblclick、onfocus、onblur、onchange经常被使用。
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 // 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onselect 在文本框中的文本被选中时发生。
onsubmit 确认按钮被点击，使用的对象是form。
1.2 绑定方式：
方式一：
<div id="d1" onclick="changeColor(this);">点我</div>
<script>
function changeColor(ths) {
ths.style.backgroundColor="green";
}
</script>
注意：
this是实参，表示触发事件的当前元素。函数定义过程中的ths为形参。
点一下“”点我“”就触发onclick等号右边的函数changeColor(this)，
实参this传给形参ths。this指的就是div标签。
方式二：
<div id="d2">点我</div>
<script>
var divEle2 = document.getElementById("d2"); //找到标签
divEle2.onclick=function () { //点击标签，等于触发一个动作
this.innerText="呵呵";
}
</script>
1.3 搜索框示例：搜索框有默认的内容，用户点击搜索框，内容消失。如果用户什么都没输入就离开搜索框，默认的内容回来了。
<body>
<input type="text" id="d1" value="迈腾2020">
<input type="button" value="搜索">
<script>
var d1Ele = document.getElementById('d1');//用户找到输入框，即找到d1标签
d1Ele.onfocus = function () { //用户点一下输入框，即d1标签获得焦点，等于清空内容
this.value = ''; //this等于d1Ele
};
d1Ele.onblur = function () { //用户离开输入框，即d1标签失去焦点
if (!this.value.trim()) { //this.value = ''也就是false，!false就是true，执行下面代码。.trim()去掉空格，以防用户误输入空格。
this.value = '迈腾2020'
}
};
</script>
注意：placeholder="迈腾2020",默认的内容"迈腾2020"会一直存在。
<input type="text" placeholder="迈腾2020">
1.4 背景色切换示例：//ths.classList就是this.classList结果是"c1 c2"，.toggle('c2')存在c2就删除，那么显示c1背景色，
不存在c2就添加，那么显示c2背景色。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>背景色切换</title>
<style>
.c1{
200px;
height:200px;
background-color:greenyellow;
border-radius:50%;
}
.c2{
background-color:yellow;
}
.c3{
200px;
height:200px;
background-color:yellow;
border-radius:50%;
}
.c4{
background-color:red;
}
</style>
</head>
<body>
<div class="c1 c2" onclick="change(this)"></div>
<div class="c3 c4"></div>
<script>
function change(ths){
ths.classList.toggle('c2');
};
var c4Ele = document.getElementsByClassName('c4');
c4Ele[0].onclick = function () { //c4Ele[0]才是<div class="c3 c4"></div>，c4Ele是数组
this.classList.toggle('c4'); //this就是c4Ele[0]
}
</script>
</body>
</html>
