一、事件对象
event || window.event
事件源对象：
event.target 火狐、谷歌
event.srcElement Ie、谷歌
target和srcElement是事件对象event身上的两个属性，记录着事件触发的源头（事件源对象）
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
<style type="text/css">
.wrapper {
width: 200px;
height: 200px;
background-color: red;
}
.content {
width: 100px;
height: 100px;
background-color: black;
}
.box {
width: 50px;
height: 50px;
background-color: #ccc;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">
<div class="box"></div>
</div>
</div>
<script type="text/javascript">
var wrapper = document.getElementsByClassName("wrapper")[0];
var content = wrapper.children[0];
var box = content.children[0];
box.onclick = function(e) {
console.log(e.target); // 打印事件源对象
console.log("a");
e.stopPropagation(); // 阻止事件冒泡
}
content.onclick = function(e) {
console.log(e.target); // 打印事件源对象
console.log("b");
e.stopPropagation(); // 阻止事件冒泡
}
wrapper.onclick = function(e) {
console.log(e.target); // 打印事件源对象
console.log("c");
}
</script>
</body>
</html>
点击box,打印后的事件源对象为：
点击content,打印后的事件源对象为：
点击wrapper,打印后的事件源对象为：
二、事件委托
// 利用事件冒泡，和事件源对象进行处理 //【优点】： // 1、提高性能，不需要循环所有的元素一个个绑定事件 // 2、灵活当有新的子元素时，不需要重新绑定事件
先来看一个简单案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
// 事件委托
// 要求，给每个li注册点击事件并输出每个li的内容
var ul = document.getElementsByTagName("ul")[0];
ul.onclick = function(e) {
var event = e || window.event; // 兼容IE
var target = e.target || e.srcElement; // 获取事件源对象
console.log(target.innerText); // 打印出事件源对象的文本内容
}
</script>
</body>
</html>
通过获取父级，将事件委托（冒泡）给父级对象，并通过获取事件源对象的文本内容，来得到相应结果。减少多余的循环操作，提高性能、优化代码。
控制台打印结果如下：
三、事件分类