概览

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

事件模型

事件的传播可分为三个阶段：捕获、目标及冒泡阶段。
以老师的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.