Event事件对象
change 文本改变事件 ：用于input表单 文本改变的时候触发
error 加载错误事件 ：当加载出错和失败的时候触发
load 加载事件 ：加载事件，一般用于预加载或window.onload=function window.addEventListener("load",function(){});
submit 提交事件" ：用于from表单提交时触发，触发的不是按钮 是from 一定要取消默认行为
reset 重置事件 ：用于from表单重置时触发，触发的不是按钮 是from
resize 改变尺寸事件 ：配合rem使用 屏幕自定义适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html{
font-size: 200px;
}
img{
width: 1rem;
height: 1rem;
}
</style>
</head>
<body>
<img src="./icon/1.png" alt="">
<script>
window.addEventListener("resize",resizeHandler);
function resizeHandler(e){
var size=document.documentElement.clientWidth/1920;
document.documentElement.style.fontSize=size*100+"px";
console.log(size);
}
</script>
</body>
</html>
focus 获取焦点事件 ：按tab键 获取焦点的时候触发 其中e.热；relatedTarget 上一次焦点的对象
blur 失去焦点事件 ：失去焦点的时候触发 如input中有个 placeholder 提示出入啥 可以使用 focus和blur 来实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="text" >
<script>
var input=document.querySelector("input");
input.addEventListener("focus",inputhoudler);
input.value="姓名";
input.addEventListener("blur",inputhoudler);
function inputhoudler(e){
if(e.type==="blur"){
if(this.value.length===0){
this.value="姓名";
}
}else if(e.type==="focus"){
if(this.value==="姓名"){
this.value="";
}
}
}
</script>
</body>
</html>
input 事件
DOM.addEventListner("input",inputHandler);
e.data 是当前输入的内容
e.inputType 显示当前是什么操作 插入文本 删除文本
e.isComposing 是否启用输入法
如果一个input的框不能输入中文，可不可以做到？ 后面学习正则表达式的时候可以使用！
keyboard事件
keydown和keyup 一般是配合使用的
e.code 当前按下的键 Key+键名
e.key 当前按下的键 键名
e.keycode 键码值 最常用的是这个
滚轮事件
火狐浏览器使用DOMMouseScroll
其他浏览器使用mousewheel
下拉菜单
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
#sanjiao{
display:inline-block;
width: 0px;
height: 0px;
border-top: 10px solid #000000;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
position: absolute;
right: 10px;
top: 10px;
}
#button{
width: 120px;
height: 25px;
border: 1px solid #000000;
position: relative;
}
#button:first-child{
font-size: 16px;
}
ul{
display: none;
width: 120px;
border: 1px solid #000000;
list-style: none;
position: absolute;
top: 25px;
}
li{
border-bottom: 1px solid #000000;
text-align: center;
}
/* li 标签最后一个样式 */
li:last-of-type{
border-bottom: unset;
}
li:hover{
background-color: #999999;
cursor: default;
}
</style>
</head>
<body>
<div id="button">
<span></span><span id="sanjiao"></span>
</div>
<ul id="menu">
</ul>
<script>
var list=["北京","上海","长春","德惠","大连","沈阳"];
var btn,menu;
btn=document.querySelector("#button");
menu=document.querySelector("#menu");
for(var i=0;i<list.length;i++){
var li =document.createElement("li");
li.textContent=list[i];
menu.appendChild(li);
};
btn.addEventListener("click",clickHnadler);
menu.addEventListener("click",liclickHandler);
function clickHnadler(e){
menu.style.display="block";
}
function liclickHandler(e){
btn.firstElementChild.textContent=e.target.textContent;
menu.style.display="none";
}
</script>
</body>
</html>
...........就不一一介绍了
