同级元素点击事件的位置关系

如果两个元素属于同级，且相互重叠，则在上面的可以被点击，下面的点击不到。（主要通过设置不同的z-index值）。这个很好理解，同级元素之间不存在事件传播，不管是冒泡还是捕获。
需要注意一点，如果两个元素的z-index值相同，则是可以点击到位置靠后的那个元素。

DOM树层级间的事件关系（chrome浏览器为参考）

因为目前用的是chrome浏览器，所以基于此进行测试，暂不兼顾 ie 浏览器兼容类问题。

使用dom2级事件添加点击事件，默认为false（不捕获）
e4.addEventListener('click',function(e){
    console.log('e4'+e.type);
},true);

例如，父元素嵌套子元素（拿一组同心圆做例子），此时如果分别给他们添加了点击事件，当你点击中心圆的时候，你其实也同时点击了同心圆上所有的元素，他们的点击事件都会被触发。触发的顺序有两种，冒泡和捕获。

如果为冒泡，则是从子元素开始触发，直到外层。
如果为捕获，则是从父元素开始触发，直到内部。

这里有一点说明，触发事件需要元素有相应的事件，我在一开始的理解中就是因为这里的关系，产生了困惑。

事件对象（event）

在触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息。

        e1.onclick=function(e){
            console.log(1+e.type);
        };
        e1.onclick=function(e){
            console.log(3+e.type);
        };
        e1.addEventListener('click',function(e){
            console.log(2+e.type);
        },true);    
        e1.addEventListener('click',function(e){
            console.log(4+e.type);
        },true);    
        显示结果为3 click 2 click 4 click

html上直接onclick，变量event内直接存着event对象。
dom 0级和dom2级需要传入一个参数，即事件对象。
这里说明一点，dom 2级可以添加多个事件，即使是点击事件也可以增加多个，然后按顺序执行。另外两种则只能添加一个同种事件，后添加的会覆盖新添加的。

事件对象的常用属性和方法

type 被触发的事件类型
target 事件的目标
currentTarget 其事件处理程序当前正在处理事件的那个元素
preventDefault() 取消事件的默认行为
stopPropagation() 取消事件的进一步捕获或者冒泡。

事件对象内部的 this 一直指向 currentTarget 的目标，target 只包含事件的实际目标。比如，一个大 div 里面有个小 div，给大 div 注册了事件，小的没有注册，当你点击下 div 时，事件冒泡，到大 div 的时候进行处理，这时产生一个 event，里面的 this
指、currentTarget 指向大的 div，而 target 指向小的 div 。

同时可以依据 event.type 的不同来处理不同的事件（用switch语句）