一、事件类型
常见的主要事件类型介绍如下：
onclick 当用户点击某个对象时调用的事件句柄。
ondblclick 当用户双击某个对象时调用的事件句柄。
onfocus 元素获得焦点。 练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onkeypress 某个键盘按键被按下并松开。
onkeyup 某个键盘按键被松开。
onload 一张页面或一幅图像完成加载。
onmousedown 鼠标按钮被按下。
onmousemove 鼠标被移动。
onmouseout 鼠标从某元素移开。
onmouseover 鼠标移到某元素之上。
onmouseleave 鼠标从元素离开
onselect 文本被选中。
onsubmit 确认按钮被点击。
二、onsubmit实例
onsubmit主要用在form表单进行submit提交时执行的事件，即通过form标签绑定此事件，点击form下的submit按钮执行事件。当表单在提交时触发， 该属性也只能给form元素使用。应用场景:：在表单提交前验证用户输入是否正确，如果验证失败，在该方法中我们应该阻止表单的提交。实例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <form action="" class="form"> <p><input type="text" class="inpt"><span class="error"></span></p> <input type="submit" > </form> <script> var ele_form=document.getElementsByClassName("form")[0]; var ele_inpt=document.getElementsByClassName("inpt"); var ele_error=document.getElementsByClassName("error")[0]; function foo() { ele_error.innerHTML="" } ele_form.onsubmit=function () { //通过父级form节点绑定onsubmit事件 var inpt_value=ele_inpt.value; if(inpt_value.length>5 && inpt_value.length<12){ } else{ ele_error.innerHTML="输入内容长度需要大于5小于12"; setTimeout(foo,3000); //用定时器保证提示信息显示3秒后消失 return false //阻止提交事件的发生 } } </script> </body> </html>
三、onchange实例
onchange事件主要应用在select标签上，通过select标签绑定此事件，当选定一个select下面的内容，则会执行onchange事件下的内容，一个主要的应用就是三级联动，具体实例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <select name="" id="pro"> <option value="">请选择省份</option> <option value="1">陕西省</option> <option value="2">湖北省</option> <option value="3">广东省</option> </select> <select name="" id="city"> <option value="">请选择城市</option> </select> <script> var data={"1":["西安市","安康市","汉中市"],"2":["武汉市","汉口市","武昌市"],"3":["广州市","深圳市","佛山市"]} var ele_pro=document.getElementById("pro"); var ele_city=document.getElementById("city"); ele_pro.onchange=function () { var citys=data[this.value]; ele_city.options.length=1; //保证每次选择一个省份时，城市中没有之前遗留的城市存在 for(var i=0;i<citys.length;i++){ var ele_opt=document.createElement("option"); var city_val=citys[i]; ele_opt.innerHTML=city_val; ele_city.appendChild(ele_opt); } } </script> </body> </html>
四、onkeydown及onselect实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="d1"> <script> var ele=document.getElementById("d1"); // onkeydown事件：某个键盘键被按下，执行事件 ele.onkeydown=function (event) { console.log(event.keyCode); if(event.keyCode==13){ //event.keyCode==13为回车键 alert(123) } }; // onselect 事件：文本被选中时执行事件 ele.onselect=function () { alert(1234) } </script> </body> </html>
五、onfocus及onblur实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <input type="text" id="inp1" value="请输入用户名"> <script> var ele_inp=document.getElementById("inp1"); //onfocus事件 ele_inp.onfocus=function () { //当点中输入框，默认value值消失 this.value=""; }; //onblur事件 ele_inp.onblur=function () { //当点中非输入框区域，输入框重新赋上默认值 if(!this.value.trim()){ this.value="请输入用户名" } } </script> </body> </html>
六、mouseout与mouseleavequbie
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #container{ width: 300px; } #title{ background-color: darkblue; color: white; line-height: 30px; text-align: center; } #list .item1{ background-color: gray; line-height: 20px; } #list .item2{ background-color: #f0ad4e; line-height: 20px; } #list .item3{ background-color: green; line-height: 20px; } .hide{ display: none; } </style> </head> <body> <div id="container"> <div id="title">使用了mouseout事件↓</div> <div id="list" class="hide"> <div class="item1">第一行</div> <div class="item2">第二行</div> <div class="item3">第三行</div> </div> </div> <script> var ele_title=document.getElementById("title"); var ele_list=document.getElementById("list"); var ele_container=document.getElementById("container"); // 1.不论鼠标指针离开被选元素还是任何子元素，都会触发 mouseout 事件。 // 2.只有在鼠标指针离开被选元素时，才会触发 mouseleave 事件。 ele_title.onmouseover=function () { ele_list.classList.remove("hide"); }; ele_container.onmouseout=function () { ele_list.classList.add("hide"); }; ele_container.onmouseleave=function () { ele_list.classList.add("hide"); } </script> </body> </html>