dom-事件模型及冒泡

事件模型

(1). 什么是: 从触发事件开始，到所有相关的事件处理函数都执行完，所经历的过程 (2). 包括: 3个阶段:

• a. 捕获阶段:

当触发事件时，浏览器会从顶级元素，到当前触发事件的元素位置，遍历各级父元素上的事件处理函数。——仅遍历，记录，不触发！
为什么? 全球浏览器开发者都一致认为，点在内层元素上，也等效于点在了外层元素上。所以，要记录当前元素各级父元素上绑定的所以事件处理函数。

• b. 目标触发:

优先触发目标元素上的事件处理函数
目标元素(target): 最初触发事件的这个本来想点击的元素

• c. 冒泡阶段:

按照捕获阶段记录的父元素上的事件函数的顺序，由内向外反向触发各级父元素上的事件处理函数。

• 取消冒泡/停止漫延:
  e.stopPropagation();
  

利用冒泡/事件委托/事件代理(delegate)

• 优化:
  尽量减少事件监听对象的个数
• 为什么:
  因为浏览器触发事件时是用遍历方式查找到事件监听对象。事件监听对象的多少，决定了遍历的速度，也决定了事件响应的速度。
• 何时:
  当多个平级子元素要绑定相同的事件时，都必须利用事件委托。
• 如何:
• i.只将事件绑定在父元素一份即可！
  结果: 点击任何一个子元素，都会冒泡触发父元素上的事件处理函数.
• ii.如何获得目标元素:
  错误: 用this！因为事件绑定在父元素上，由父元素触发执行，this->父元素。不再指子元素
  正确: 用e.target代替this！
  e.target: 专门保存目标元素的事件属性。不会随冒泡儿改变！vs this 冒泡到哪一个元素，就指哪个元素。
  iii. 判断目标元素是否想要的。只有目标元素是想要的元素，才执行后续操作。否则什么也不做！
  e. 阻止默认行为:
  • 1). 有些元素在点击后，总是带着浏览器默认的行为:
    比如:
    i. 点击click me，总是自动将#top加到url结尾！
    ii. 点击总是自动提交
  • 2).很多情况下，我们不需要这些默认行为！
  • 3). e.preventDefault() 阻止 默认(行为)