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隐藏
$(wrapper).on('click,flase')
除了会阻止冒泡和捕获传播,还会组织默认事件,相当于 $(wrapper).on('click,function(a){ a.stopPropagation() a.preventdefault() 停止回调函数执行并立即返回。}')复制代码为什么以上代码也会阻止浮层出现,因为在点的一瞬间,执行2个操作,一个show,一个给document添加事件监听,隐藏浮层, 在冒泡到document阶段,document就会执行这个监听,可以在冒泡的过程中在后面添加事件处理函数
解决方法,加一个stopPropagation
或者设置一个setTimeout
把监听document包裹起来,在冒泡结束后再添加监听