同级元素点击事件的位置关系
如果两个元素属于同级，且相互重叠，则在上面的可以被点击，下面的点击不到。（主要通过设置不同的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语句）
事件委托
事件委托是基于上面的叙述的内容的。在一些特定的情况下，如果给页面内大量元素添加同样的事件，会非常占用内存，所以可以给最外面的元素（比如 body document）添加事件，然后通过 event 的 target 属性确定具体的元素，来进行处理。
那么哪些时候适合用事件委托呢？
click mousedown mouseup keydown keyup keypress 这样的鼠标键盘事件比较适合。而 mouseover 和 mouseout 不适合。因为当鼠标移入元素的子元素时，也会触发事件，会很频繁而又麻烦。
网友评论