DOM 事件基本概念

一、DOM 事件的级别

DOM 0：
element.onclick = function () {}

DOM 2：
element.addEventListener('click',function (){},false)
true: 捕获
false：冒泡,默认值

DOM 3：
element.addEventListener('keyup',function (){},false)
DOM 3标准时代主要新增了键盘等物理事件

二、DOM 事件模型和事件流

捕获：从上而下，window => document => html => body => .... => 目标元素
冒泡： 从下而上，目标元素 => ... => body => html => document => window
事件流：：捕获阶段-目标阶段-冒泡阶段

捕获的具体流程：window => document => html => body => .... => 目标元素

<div id="div">
    <span id="span">目标元素</span>
</div>
<script>
    var oDiv = document.getElementById('div'),
        oSpan = document.getElementById('span'),
        oBody = document.body,
        oHtml = document.documentElement;
    oDiv.addEventListener('click',function (){
        console.log('div');
    },true)
    oSpan.addEventListener('click',function (){
        console.log('span');
    },true)
    oBody.addEventListener('click',function (){
        console.log('body');
    },true)
    oHtml.addEventListener('click',function (){
        console.log('html');
    },true)
    document.addEventListener('click',function (){
        console.log('document');
    },true)
    window.addEventListener('click',function (){
        console.log('window');
    },true)
</script>
// 输出顺序 window document html body div span

冒泡的具体流程：目标元素 => ... => body => html => document => window

<div id="div">
    <span id="span">目标元素</span>
</div>
<script>
    var oDiv = document.getElementById('div'),
        oSpan = document.getElementById('span'),
        oBody = document.body,
        oHtml = document.documentElement;
    oDiv.addEventListener('click',function (){
        console.log('div');
    },false)
    oSpan.addEventListener('click',function (){
        console.log('span');
    },false)
    oBody.addEventListener('click',function (){
        console.log('body');
    },false)
    oHtml.addEventListener('click',function (){
        console.log('html');
    },false)
    document.addEventListener('click',function (){
        console.log('document');
    },false)
    window.addEventListener('click',function (){
        console.log('window');
    },false)
</script>
// 输出顺序 span div body html document window

三、Event 对象的常见应用

event.preventDefault(): 阻止默认事件，比如：

<a href="http://www.baidu.com">跳转成功</a>
<a href="http://www.baidu.com" id="link">跳转失败</a>
<script>
    var oLink = document.getElementById('link');
    oLink.addEventListener('click',function (ev){
        var ev = ev || window.event;
        ev.preventDefault();
    },false)
</script>

event.stopPropagation(): 阻止冒泡行为：

<span id="span">点击</span>
<script>
    var oSpan = document.getElementById('span'),
        oBody = document.body;
    oSpan.addEventListener('click',function (ev){
        console.log('span')
        var ev = ev || window.event;
        ev.stopPropagation();
    },false)
    oBody.addEventListener('click',function (){
        console.log('body')
    },false)
</script>
// 只输出 span，阻止了冒泡，所以 console.log('body') 没有被执行

event.stopImmediatePropagation(): 阻止事件冒泡、把这个元素绑定的同类型事件也阻止

<div id="div">
    <span id="span">目标元素</span>
</div>
<script>
    var oDiv = document.getElementById('div'),
        oSpan = document.getElementById('span');
    oSpan.addEventListener('click', function(ev) {
        console.log('span绑定的第一个事件函数');
    }, false);
    oSpan.addEventListener('click', function(ev) {
        var ev = ev || window.event;
        console.log('span绑定的第二个事件函数');
        // 阻止事件冒泡、把 span 元素绑定的同类型事件也阻止
        ev.stopImmediatePropagation();
    }, false);
    oSpan.addEventListener('click', function(ev) {
        console.log('span绑定的第三个事件函数');
    }, false);
    oDiv.addEventListener('click', function(ev) {
        console.log('div');
    }, false);
</script>
// 输出 span绑定的第一个事件函数 -- span绑定的第二个事件函数
// console.log('span绑定的第三个事件函数'); console.log('div'); 没有执行

event.currentTarget 和 event.target
event.currentTarget：事件绑定的元素
event.target：触发事件的元素

<div id="div">
    <span id="span">目标元素</span>
</div>
<script>
    var oDiv = document.getElementById('div'),
        oSpan = document.getElementById('span');
    oDiv.addEventListener('click', function(ev) {
        var ev = ev || window.event;
        console.log(ev.currentTarget);
        console.log(ev.target);
    }, false);
</script>

如果点击的是span，那么结果为：