简述 DOM 事件模型(事件机制)

73 阅读2分钟

本篇文章是本人学习之后的总结文章, 如有不妥请各位大佬指正, 谢谢大家!!!

我们先来思考一下

什么是捕获? 什么是冒泡?

  1. 点击一个div, div里面有button....., 两个DOM元素上面都有各自的绑定事件
  2. 先调用哪个?
  3. IE说: "我要先调用 button的事件, 在调用div的事件"
  4. 网景: "不行, 我要和IE对着干, 先调用 div的, 在调button的"
  5. IE的就是 冒泡
  6. 网景就是 捕获
  7. W3C说: "别吵吵, 我都能提供, 给你们个addEventLisenter(), 第三个是bool, true就是捕获, false就是冒泡"
  8. W3C又说: "IE这回干了件人事, 这个 冒泡 是挺好, 我默认是 false"

怎么阻止冒泡?

e.stopPropagation() // 后续将不再执行

那什么叫做事件委托呢?

首先我们要明白为啥要委托?

举个栗子:

  1. 一个div里面有10个button, 要绑定10个事件
  2. 每个事件内容不确定
  3. 没有事件委托, 就要一个一个的绑定事件了
  4. 我现在将div上面绑定一个事件
  5. 根据点击的button不同进行判断, 操作后续
  6. 这就像是我将10个button事件委托给了div父元素去做, button上面啥事也不做
  7. 这就是事件委托了

事件委托的好处是啥?

  1. 节省内存
  2. 可以监听动态元素

你又要问我, 啥是动态元素???

  1. 比如我1秒后添加一个button元素
  2. 这就是动态元素
  3. 事件委托就能监听到这个动态元素, 然后进行操作

你又要说, 那我div的直接子级不是button, 外面有个span咋办?

建议是递归查找, 是否是你想要的元素, 不是怎么处理, 找不到怎么处理, 随便你喽

什么是默认事件? 怎么取消?

  1. 一个a标签, 点击了就会跳转其它页面, 这就是默认事件
  2. 咋阻止默认事件呢?
  3.  e.preventDefault()