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{ 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; 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{ 120px; height: 25px; border: 1px solid #000000; position: relative; } #button:first-child{ font-size: 16px; } ul{ display: none; 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>
...........就不一一介绍了