博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
DOM事件
阅读量:7009 次
发布时间:2019-06-28

本文共 970 字,大约阅读时间需要 3 分钟。

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包裹起来,在冒泡结束后再添加监听

转载地址:http://gyntl.baihongyu.com/

你可能感兴趣的文章