HTML 4.0 的新特性之一是有能力使 HTML 事件触发浏览器中的动作（action），比如当用户点击某个 HTML 元素时启动一段 JavaScript。
一、Event事件汇总
- onclick 当用户点击某个对象时调用的事件句柄。
- ondblclick 当用户双击某个对象时调用的事件句柄。
- onfocus 元素获得焦点。
- onblur 元素失去焦点。
- onchange 域的内容被改变。
- onkeydown 某个键盘按键被按下。
- onkeypress 某个键盘按键被按下并松开。
- onkeyup 某个键盘按键被松开。
- onload 一张页面或一幅图像完成加载。
- onmousedown 鼠标按钮被按下。
- onmousemove 鼠标被移动。
- onmouseout 鼠标从某元素移开。
- onmouseover 鼠标移到某元素之上。
- onmouseleave 鼠标从元素离开
- onselect 文本被选中。
- onsubmit 确认按钮被点击。
二、用法案例
1、serche搜索框
- 用到的事件
onfocus 元素获得焦点。 //练习：输入框
onblur 元素失去焦点。 应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
onchange 域的内容被改变。 应用场景：通常用于表单元素,当元素内容被改变时触发.（三级联动）
- 参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<input type="text" id="search" value="请输入用户名：" onfocus="func1()" onblur="func2()">
<script>
var ele= document.getElementById("search"); //获取标签
function func1()
{
if(ele.value=="请输入用户名：")
{
ele.value=""; //得到焦点时就将值清空
}
}
function func2()
{
if(!ele.value.trim()) //或者ele.value.trim()==undefined,trim()表示去掉空格
{
ele.value="请输入用户名："; //失去焦点，即点击其他地方就将值变为初始状态
}
}
</script>
</body>
</html>
2、onload加载
- 用到的事件
onload 一张页面或一幅图像完成加载。
onload 属性开发中 只给 body元素加；
这个属性的触发 标志着页面内容被加载完成；
应用场景: 当有些事情我们希望页面加载完立刻执行,那么可以使用该事件属性。
- 参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
function func()
{
var ele=document.getElementsByClassName("div1")[0]; //获取div1标签
console.log(ele.innerHTML);
}
</script>
</head>
<body onload="func()">
<div class="div1">I am DIV</div>
</body>
</html>
3、事件绑定——标签内
直接绑定在标签内
<p id="p1" onclick="func(this)">P标签</p>
这里的this参数可以代表p标签本身，因此在对应的func函数中，可以用一个形参来代表整个p标签进行其他操作
function func(that)
{
//此that就代表了p标签本身，也不需要重新获取了
// console.log(that); //打印p标签本身
console.log(that.previousElementSibling); //打印p标签前面的兄弟（p标签前面的标签）
console.log(that.parentNode); //打印p标签的上级标签
}
4、事件绑定——JS接函数
比如有这样一堆div标签：
<div class="div2">DIV2</div>
<div class="div2">DIV2</div>
<div class="div2">DIV2</div>
<div class="div2">DIV2</div>
<div class="div2">DIV2</div>
先获取class名为div2的标签：
var ele=document.getElementsByClassName("div2");
然后因为原生JS不会去遍历获得的对象，所以如果获得了多个对象需要手动来遍历：
for(var i=0; i<ele.length; i++)
{
//通过对象去绑定事件，来触发函数
ele[i].onclick=function()
{
alert("哈哈哈");
}
}
当然如果觉得遍历起来麻烦，也可以直接获取全部div标签（需要准确定位时此法不推荐），就不需要手动遍历了，一个下标就代表了一群标签：
var ele=document.getElementsByTagName("div"); //找所有的div标签
ele[0].onclick=function()
{
alert("哈哈");
}
5、onsubmit表单提交
- 用到的事件
onkeydown 某个键盘按键被按下。 应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
onsubmit 确认按钮被点击的效果，将表单提交给服务端。当表单在提交时触发. 该属性也只能给form元素使用.应用场景: 在表单提交前验证用户输入是否正确.如果验证失败.在该方法中我们应该阻止表单的提交.
- 参考代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="" id="form1">
<input type="text" name="user" placeholder="username">
<input type="submit" value="提交" id="sub">
</form>
<script>
var ele=document.getElementById("form1");
// ele.οnsubmit=function(e){
// alert("已提交！");
// //若返回一个false就不会发送给服务端，而默认返回的是true
// // return false;
// //或者使用事件e来提交
// e.preventDefault();
// }
ele.onkeydown=function(){
alert("已提交！");
//若返回一个false就不会发送给服务端，而默认返回的是true
// return false;
//或者使用事件e来提交
e.preventDefault();
}
</script>
</body>
</html>
6、事件传播
意思就是内层标签与外层标签的相互影响，可以通过阻止外层事件传播到内层事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.outer{
width:250px;
height: 250px;
background-color: #2daebf;
}
.inner{
width: 100px;
height: 100px;
background-color: blue;
}
</style>
</head>
<body>
<div class="outer" onclick="func2()">
<div class="inner" onclick="func1()"></div>
</div>
<script>
var ele=document.getElementsByClassName("inner")[0]; //获取inner标签
ele.onclick=function(e){
alert("inner被触发!");
e.stopPropagation(); //阻止事件向外部div传播
}
function func2(){
alert("outer被触发！");
}
</script>
</body>
</html>
这样点击深蓝色就只会出现“inter被触发”，不会受外部的影响而出现“outer被触发”