Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

DOM事件流 #79

Open
Lawguancong opened this issue Sep 26, 2021 · 0 comments
Open

DOM事件流 #79

Lawguancong opened this issue Sep 26, 2021 · 0 comments

Comments

@Lawguancong
Copy link
Owner

Lawguancong commented Sep 26, 2021

基于发布订阅模式,就是在浏览器加载的时候会读取事件相关的代码,但是只有实际等到具体的事件触发的时候才会执行。
如何让事件先冒泡后捕获??

在DOM标准事件模型中,是先捕获后冒泡(先下后上)。但是如果要实现先冒泡后捕获的效果,对于同一个事件,监听捕获和冒泡,分别对应相应的处理函数,监听到捕获事件,先暂缓执行,直到冒泡事件被捕获后再执行捕获之间。

DOM级别一共可以分为4个级别:DOM0级「通常把DOM1规范形成之前的叫做DOM0级」,DOM1级,DOM2级和 DOM3级,而DOM事件分为3个级别:DOM0级事件处理,DOM2级事件处理和DOM3级事件处理。如下图所示:
image

  • DOM0 级事件,直接在 html 元素上绑定 on-event,比如 onclick,取消的话,dom.onclick = null,同一个事件只能有一个处理程序,后面的会覆盖前面的。
  • DOM2 级事件,通过 addEventListener 注册事件,通过 removeEventListener 来删除事件,一个事件可以有多个事件处理程序,按顺序执行,捕获事件和冒泡事件
  • DOM3级事件,增加了事件类型,比如 UI 事件,焦点事件,鼠标事件
  • 捕获型事件流
  • 冒泡型事件流

image

阶段阶段

  • 捕获
  • 目标
  • 冒泡

方法(要考虑兼容性问题,IE)

  • event.preventDefault() return false
  • e.stopPropagation()
  • event.target & event.currentTarget()
  • window.event.cancelBubble=true;
  • window.event.returnValue=fale; return false;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant