概览

这周的重点学习内容为事件。相关知识点如下：

事件模型

事件的传播可分为三个阶段：捕获、目标及冒泡阶段。
以老师的showcase9为例:

页面

this is a link

代码

<script>
  ['html', 'body', 'p', 'a'].forEach(targetName => {
    let $element = document.getElementsByTagName(targetName)[0];
    $element.addEventListener('click', function(event) {
      // event.preventDefault();
      // event.stopPropagation();
      console.log(targetName, 'click', true);
    }, true);
    $element.addEventListener('click', function(event) {
      // event.preventDefault();
      // event.stopPropagation();
      event.stopImmediatePropagation(); // https://stackoverflow.com/questions/5299740/stoppropagation-vs-stopimmediatepropagation/5299841
      console.log(targetName, 'click', false);
    }, false);
    $element.addEventListener('click', function(event) {
      document.body.style.backgroundColor = "#f00";
    }, false);
  });
</script>

运行结果

html click true
body click true
p click true
a click true
a click false
html click true
html click false

stopPropagation will prevent any parent handlers from being executed
stopImmediatePropagation will prevent any parent handlers and also any other handlers from executing
The Event interface's preventDefault() method tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be. The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

事件与观察者模式的联系

观察者模式定义对象间的一种一对多依赖关系。不难发现，事件也是观察者模式的一种实现。

• 事件，就是被观察者，也叫做一个主题
• 事件模型， 为观察者模式具体实现，浏览器中实现了改模型
• 事件处理机制，即事件传播的方式（捕获&冒泡）

Reference

DOM Event Architecture
EventTarget.addEventListener()
Event.preventDefault()
事件模型
图解观察者模式
观察者模式与发布/订阅模式区别
设计模式学习----观察者模式（事件监听实现）