DOM事件

DOM level 0

标准出来之前的东西 html上面写或者js中οnclick=函数

DOM level 1

2个版本 98年 2000年 w3c出来制定，总结了一下

DOM level 2

2000.11主要版本，沿用至今

dom level 1

xx.onclick=function(){
    console.log(1)
}//是一个属性，可能被覆盖
复制代码

dom level 2

xx.addEventListener('click',function(){
    console.log(1)
},undefined)//xx用有一个队列，队列先进先出，undefined默认添加，不需要手动写
复制代码

one和on的区别在于one里面加了个removeEventListener,表示一次时间监听

事件模型：先捕获后冒泡

从上倒下：捕获阶段

从下到上：冒泡阶段

！！！如果最后一个节点(儿)，同时写了捕获和冒泡，那么执行顺序按照写的顺序，从上倒下 辣鸡js，变态

e.target 指向触发事件监听的对象。
e.currentTarget 指向添加监听事件的对象。
复制代码

点击关闭浮层

1.0

• 阻止当前事件在冒泡和捕获阶段的进一步传播

  event.stopPropagation()

2.0

• 如果1.0中监听太多会浪费内存，只有在浮层出来时才监听document隐藏

tips：如果在浮层中有checkbox等，我们在监听wrapper写了$(wrapper).on('click,flase')除了会阻止冒泡和捕获传播，还会组织默认事件，相当于

$(wrapper).on('click,function(a){
    a.stopPropagation()
    a.preventdefault()
    停止回调函数执行并立即返回。
}')
复制代码

为什么以上代码也会阻止浮层出现，因为在点的一瞬间，执行2个操作，一个show，一个给document添加事件监听，隐藏浮层， 在冒泡到document阶段，document就会执行这个监听，可以在冒泡的过程中在后面添加事件处理函数

解决方法，加一个stopPropagation或者设置一个setTimeout把监听document包裹起来,在冒泡结束后再添加监听