事件流
事件冒泡:事件从最具体的节点开始向外传播到最宽泛的节点。这是事件流默认类型，被绝代多数浏览器支持。
element.addEventListener('event',function,trun);
事件捕货:时间从最宽泛的节点开始向类传播到最具体的节点。这种方式在IE8和更在的版本的IE中不被支持。
事件冒泡示例:
<!DOCTYPE html>
<html>
<head>
<title>事件冒泡</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul id="ul">
<li id='B'><a id="A">油条</a>
</ul>
<script>
var ela = document.getElementById('A');
ela.addEventListener('click', getEvent, false);
var elli = document.getElementById('B');
elli.addEventListener('click', getEvent, false);
var elli = document.getElementById('ul');
elul.addEventListener('click', getEvent, false);
function getEvent(){
alert(this.innreHTML);
}
</script>
</body>
</html>
事件捕获示例:
<!DOCTYPE html>
<html>
<head>
<title>事件捕获</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<ul id="ul">
<li id="A"><a id="B"> 宝马奔驰</a></li>
</ul>
<script>
var ela = document.getElementById('A');
ela.addEventListener('click', getEvent, true);
var elli = document.getElementById('B');
elli.addEventListener('click', getEvent, true);
var elul = document.getElementById('ul');
elul.addEventListener('click', getEvent, true);
function getEvent() {
alert(this.innerHTML);
}
</script>
</body>
</html>