一、事件类型
常见的主要事件类型介绍如下：
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事件下的内容，一个主要的应用就是三级联动，具体实例如下：
select联动
<!--定义和用法-->
<!--option 元素定义下拉列表中的一个选项（一个条目）。-->
<!--浏览器将 <option> 标签中的内容作为 <select> 标签的菜单或是滚动列表中的一个元素显示。-->
<!--option 元素位于 select 元素内部。-->
<!DOCTYPE html>
<html lang="zh—CN">
<head>
<meta charset="UTF-8">
<title>select联动</title>
</head>
<body>
<select name="" id="s1" onchange="loadData();">
<option value="">请选择省份</option>
</select>
<select name="" id="s2">
<option value="">请选择省份</option>
</select>
<script>
var s1Ele = document.getElementById("s1");
var data = {"四川": ["成都", "攀枝花", "湘潭"],"广东": ["深圳", "梅州", "东莞"],
"江西": ["宜春", "南昌", "景德镇"]};
// 把data里面的key都拿出来，生成option标签，添加到s1这个select
var str = "";
for (var key in data) {
console.log(key);
// 2 .往生成标签里加
var s = "<option>" + key + "</option>";
console.log(s);
str += s;
}
console.log(str);
s1Ele.innerHTML = str;
function loadData() {
var s2Ele = document.getElementById("s2");
s2Ele.options.length = 0; // 清空select 下面的option
// 把data里面的key都拿出来，生成option标签，
// 添加到s1这个select
var indexValue = s1Ele.selectedIndex;
var optionEles = s1Ele.options;
var key = optionEles[indexValue].innerText;
var data2 = data[key];
for (var i=0; i<data2.length;i++) {
var optionEle = document.createElement("option");
optionEle.innerText = data2[i];
s2Ele.appendChild(optionEle);
}
}
</script>
</body>
</html>
定时器例子
<!DOCTYPE html>
<html lang="zh—CN">
<head>
<meta charset="UTF-8">
<title>定时器示例</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="开始" onclick="start()">
<input type="button" value="结束" onclick="end()">
<script>
var t;
function f() {
// 获取时间
var dateObj = new Date();
// 获取i1 标签
var i1Ele = document.getElementById("i1");
i1Ele.value=dateObj.toLocaleString();
}
//每隔一秒就执行一次f()
function start() {
f();
// 之创建一个定时器，有定时器的话我就不创建
if(t === undefined){ // 如果没有就创建t
t = setInterval(f,1000); // 1000为毫秒
}
}
// 停止计时
function end() {
clearInterval(t);
t = undefined; // 清空,没请空，t还会有值，停止就启动不了
}
</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{
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>