<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
#div1 {
width: 300px;
height: 300px;
margin: 30px auto;
background: #FDF73F;
}
#div2{
margin: 30px auto;
width: 80%;
height: 50%;
background: #B2FD5E;
}
#div3{
margin: 30px auto;
width: 80%;
height: 50%;
background: #FDA8C1;
}
#text {
width: 300px;
height: auto;
margin: 30px auto;
background: #cecece;
}
</style>
</head>
<body>
<div id="div1">
div1
<div id="div2">
div2
<div id="div3">
div3
</div>
</div>
</div>
<div id="text">
<h3>DOM事件机制</h3>
<ol>
<li>三个阶段:向下捕获-目标阶段-向上冒泡。</li>
<li>同一DOM元素的捕获、冒泡事件谁先执行，取决与谁先在代码里面定义</li>
<li>事件代理(也叫事件代理)， 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。</li>
<li>javascript规范：addEventListener(event,fn)传入的对象如果有handleEvent则执行，否则没有意义</li>
</ol>
</div>
<script type="text/javascript">
// DOM事件机制
var div1 = document.getElementById('div1'),
div2 = document.getElementById('div2'),
div3 = document.getElementById('div3'),
text = document.getElementById('text');
var c = '';
//向下捕获-目标阶段-向上冒泡, 同一DOM元素的捕获、冒泡事件谁先执行，取决与谁先在代码里面定义，如下面的div3
div1.addEventListener('click', function(e){
console.log('div1-bubbling')
}, false)
div2.addEventListener('click', function(e){
console.log('div2-bubbling')
}, false)
div3.addEventListener('click', function(e){
console.log('div3-bubbling')
}, false)
div1.addEventListener('click', function(e){
console.log('div1-capture')
}, true)
div2.addEventListener('click', function(e){
console.log('div2-capture')
}, true)
div3.addEventListener('click', function(e){
console.log('div3-capture')
}, true)
/*
div1-capture
div2-capture
div3-bubbling
div3-capture
div2-bubbling
div1-bubbling
*/
// 事件代理(也叫事件代理)， 事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。利用冒泡
// 对div1进行监听，可以实现对子元素div2、div3点击事件的监听
div1.addEventListener('click', function(e){
console.log(e.target ) // e.target 事件属性可返回事件的目标节点（触发该事件的节点）
console.log(e.currentTarget) // 返回其监听器触发事件的节点
console.log(e.target.getAttribute('id'))
if(e.target.getAttribute('id') == 'div2'){
alert('元素为div2')
}
if(e.target.getAttribute('id') == 'div1'){
alert('元素为div1')
}
if(e.target.getAttribute('id') == 'div3'){
alert('元素为div3')
}
e.stopPropagation();
}, false)
// fn传入了object，作用域为object，具体处理在handleEvent里面
// javascript规范：传入的对象如果有handleEvent则执行，否则没有意义
var obj = {};
obj.a = 'a';
obj.handleEvent = function () {
alert(this.a)
}
document.addEventListener('click', obj)
</script>
</body>
</html>
