博主今天给大家分享一篇关于JavaScript事件的文章，主要内容包括常用事件介绍、事件对象、事件委托机制等。
- 1、常用事件
onclick：鼠标单击事件
onfocus：获得焦点时触发
onblur：失去焦点时触发事件
onmouseover：鼠标移动到元素上触发事件
onsubmit：确认按钮被点击时触发，常用于检测表单输入是否合法
onload：一张网页或元素加载完成时触发案例1（获得/失去焦点触发）
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<body>
<h1>获取焦点事件和失去焦点事件</h1>
用户名：<input id="username" type="text" onfocus="t();" onblur="t2();" /><br/>
邮箱：<input id="email" type="text"/>
</body>
<script>
//获取焦点触发
function t(){
//将边框变红
var username = document.getElementById('username');
username.style.border = '1px solid red';
}
//失去焦点触发
function t2(){
//还原边框
var username = document.getElementById('username');
username.style.border = '';
}
</script>
</html>效果图
案例2（鼠标/表单提交触发）
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
div{
width:200px;
height:200px;
background-color: red;
}
</style>
</head>
<body>
<h1>鼠标移动事件和onSubmit事件</h1>
<div onmouseover="t();" ></div>
<form method="get" action="" onsubmit="return t2();">
<p><input type="text" name="username"/></p>
<p><input type="text" name="email"/></p>
<p><input type="submit" value="提交" /></p>
</form>
</body>
<script>
//鼠标移上元素触发函数
function t(){
alert('onmouseover');
}
//表单提交触发函数
function t2(){
var username = document.getElementsByName('username')[0];
var email = document.getElementsByName('email')[0];
//如果不为空，则通过
if(username.value != '' && email.value != ''){
return true;
}
alert('请填写完整');
return false;
}
</script>
</html>效果图
案例3（网页加载完成触发）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
</head>
<script>
//将onload看做是window的一个属性，这个属性的内容是函数
window.onload = function(){
document.getElementsByTagName('p')[0].style.border = '1px solid red';
}
</script>
<body>
<h1>onload函数使用</h1>
<p>
这是一个P标签
</p>
</body>
</html>- 2、事件、样式、结构分离
在开发中，经常是多个人进行协同开发，可能做页面的是一个人，写Js的是另一个人，而css也可能是另外一个人，所以不能像下面这样写代码，要将页面结构、js行为、样式进行分离。
<div onclick="t();" style="wdith:300px;height:200px;background:red;"></div>修改：将样式抽取到独立的文件中，然后将onclick看做是对象的属性，只不过这个属性是一个方法而已，写一个匿名函数，如：
div.onclick = function(){
this.style.backgroundColor = 'blue';
}- 3、事件对象
（1）事件对象包括事件的相关信息，如鼠标、时间、坐标、触发的DOM对象等
（2）事件对象被系统传递给事件函数的第一个参数
（3）事件对象的属性在IE/W3c上略有不同
（4）一个重要的属性：target、srcElement(IE低版本下)，代表最底层触发的DOM对象
//这里的ev就是事件对象
div.onclick = function (ev){
console.log(ev);//查看事件对象
};- 4、事件委托
事件委托主要是把事件加到父级元素上，然后通过事件对象中的target/srcElement属性来确定哪个子元素响应事件，实现效果。如果不是这样的话，就要给每个子元素都添加事件，比较浪费资源。
案例：将table中的单元格，将其颜色变为黑色
不使用时间委托：就要给table下的所有td都绑定上函数，这样比较浪费资源
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
table{
width:300px;
height:300px;
border:0;
border-collapse: collapse;
}
td{
border:1px solid red;
}
</style>
</head>
<body>
<h1>事件委托</h1>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
//不使用事件委托机制，给每个td都绑定函数
var tds = document.getElementsByTagName('td');
var i = 0;
while(i < tds.length){
tds[i].onclick = function(){
this.style.backgroundColor = 'black';
}
i++;
}
</script>
</html>使用事件委托：只给table绑定事件，然后根据事件对象的target属性确定事件源为td，然后修改事件源的背景色
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<link rel="stylesheet" href="">
<style>
table{
width:300px;
height:300px;
border:0;
border-collapse: collapse;
}
td{
border:1px solid red;
}
</style>
</head>
<body>
<h1>事件委托</h1>
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
<script>
//使用事件委托机制
var table = document.getElementsByTagName('table')[0];//获取table对象
table.onclick = function(ev){
//使用事件对象中的target属性
ev.target.style.backgroundColor = 'black';
}
</script>
</html>效果图
