（三）前端面试：事件类

文章内容参考自《前端跳槽面试必备技巧》 

事件这一块主要涉及一下方面：

1.DOM事件的级别

这里没有DOM1是应为DOM1标准不涉及事件

DOM2在IE中监听事件使用attachEvent方法

2.DOM事件模型

1）捕获（由外向里）

看一个小demo，展示了事件捕获的具体流程：

<div id="ev">目标元素</div>

<script>
  var ev = document.getElementById('ev');

  window.addEventListener('click', function () {
    console.log('widow capture');
  }, true); // true为捕获 false为冒泡

  document.addEventListener('click', function () {
    console.log('document capture');
  }, true);

  document.documentElement.addEventListener('click', function () {
    console.log('html capture');
  }, true);

  document.body.addEventListener('click', function () {
    console.log('body capture');
  }, true);

  ev.addEventListener('click', function () {
    console.log('ev capture');
  }, true);
</script>

点击目标元素依次执行widow capture、document capture、html capture、body capture、ev capture，这是一个由外向里的过程，注意html标签是用document.documentElement获取到的

2）冒泡（由里向外）

同理...

3.DOM事件流

DOM事件流分为三个阶段：捕获--目标阶段--冒泡

4.DOM事件捕获的具体流程

在第二点处已展示

5.event对象的部分应用

1）event.preventDefault();

阻止事件的默认行为，比如a标签跳转、表单默认提交等，IE下使用event.returnValue = false

2）event.stopPropagation();

阻止冒泡，IE下用event.cancelBubble = true， 使用return false也可以阻止事件冒泡，但同时会阻止默认行为

3）event.stopImmediatePropagation();

阻止冒泡的同时还会阻止该元素剩余的其他事件处理函数的执行。

这个我也是头一次见，它可以用来干嘛呐？举个例子，若同一个按钮注册了两个事件，正常情况下两个事件都会执行，但我想执行a事件的时候阻止b事件的执行则可用到它

4）event.currentTarget

返回绑定事件的元素，和this类似

5）event.target

返回触发事件的函数

currentTarget和target有什么区别哪？看以下demo：

<style>
  html *{
    margin: 0;
    padding: 0;
  }
  ul{
    background: red;
  }
  ul li{
    display: block;
    background: #40AFFE;
  }
  ul li a{
    display: block;
    background: yellow;
  }
</style>
<ul id="ul">ul
  <li>li<a href="">a</a></li>
  <li>li<a href="">a</a></li>
  <li>li<a href="">a</a></li>
</ul>
<script>
  const ul = document.getElementById("ul");
  ul.onclick = function(event){
    const tar = event.target;
    const currentTar = event.currentTarget;
    const tagName = tar.nodeName.toLowerCase();
    console.log("target:", tar);
    console.log("currentTarget:", currentTar);
    console.log("你点击了:"+tagName);
    event.preventDefault();
  }
</script>

效果如下：

从图中看出，currentTarget始终是ul这整个元素，而target是被点击的元素。

更多详情和应用看：https://www.cnblogs.com/yewenxiang/p/6171411.html

6.自定义事件

  var ev = document.getElementById('ev');
  var eve = new Event('test');
  ev.addEventListener('test', function () {
    console.log('test dispatch');
  });
  ev.dispatchEvent(eve); // 调度事件