美文网首页
涨知识:时间冒泡跟事件捕获

涨知识:时间冒泡跟事件捕获

作者: 毛毛_000e | 来源:发表于2019-11-18 14:39 被阅读0次

1、事件触发三阶段

1、事件捕获阶段:事件从document开始往下查找,直到找到目标元素(target)

2、处于目标阶段

3、事件冒泡阶段:事件从目标元素开始向上传递冒泡,直到document

2、addEventListener

默认情况下事件使用冒泡事件,不使用捕获事件

addEventListener('click',fn,false)

false表示事件冒泡 ; true表示事件捕获

3、IE的attachEvent存在的问题

1、不支持捕获

2、attachEvent处理程序是在全局作用域中运行,this指向window(addEventListener中的this指的是绑定的目标元素)

3、存在内存泄露

4、 绑定事件的执行顺序

IE8绑定多个事件按添加的相反顺序执行;IE6-7随机执行

addEventListener是按照添加事件的顺序执行

5、onclick和addEventListener的区别?

1、onclick事件在同一时间只能指向唯一对象,给同一个目标对象绑定多个onclick事件只会执行最后一个,最后一个会覆盖前面的,但是通过addEventListener绑定多个点击事件的话会依次执行

2、addEventListener可以控制listener的触发阶段(冒泡或者捕获),onclick不行

3、取消事件,el.onclick=null,addEventListener需要使用removeListener来移除,但是如果通过addEventListener绑定的是匿名函数,那么将无法移除

6、阻止事件传播和默认行为

阻止事件传播:在w3c中使用e.stopropagation();;在IE中设置cancelBubble=true

阻止默认行为:在w3c中使用preventDefault();;在IE中使用window.event.returnValue=false

相关文章

  • 涨知识:时间冒泡跟事件捕获

    1、事件触发三阶段 1、事件捕获阶段:事件从document开始往下查找,直到找到目标元素(target) 2、处...

  • 事件捕获跟冒泡

    在dom的addEventListener() 方法中,参数有三个, event表示事件名称,例如'click';...

  • 捕获和冒泡

    捕获:从外向内冒泡:从内向外 在一个事件发生时,捕获过程跟冒泡过程总是先后发生,跟你是否监听毫无关联,先捕获后冒泡...

  • Javascript DOM事件流向

    事件流向 先捕获然后处理,然后再冒泡出去 addEventListener false冒泡 true捕获 事件捕获...

  • 事件冒泡、事件捕获、事件委托

    事件冒泡、事件捕获、事件委托

  • 深入研究事件冒泡、事件捕获和事件委托

    以前听老师讲解事件冒泡和事件捕获机制的时候跟听天书一样,只依稀记得IE使用的是事件冒泡,其他浏览器则是事件捕获。当...

  • 事件冒泡和事件捕获

    事件冒泡和事件捕获

  • day29-web前端之jQuery及Ajax

    1事件冒泡和捕获 1.1.事件冒泡:在子标签中产生的事件会传递给父标签 1.2事件捕获 捕获事件-阻止事件从子标签...

  • DOM-BOM-EVENT(7)

    7.事件深入 #7.1.事件捕获 事件流分为事件冒泡和事件捕获两种,事件冒泡指事件从里往外传播,而事件捕获刚好相反...

  • JS事件流机制

    事件流指的是 1.节点的捕获2.处理事件3.事件的冒泡 目前分为事件冒泡流,事件捕获流; 区别:1.事件冒泡流在事...

网友评论

      本文标题:涨知识:时间冒泡跟事件捕获

      本文链接:https://www.haomeiwen.com/subject/xgvvictx.html