day03-前端面试技巧-（Dom事件）

基本概念：DOM事件的级别：

简答

DOM事件的级别.png

详细：
1.DOM0级事件
在了解DOM0级事件之前，我们有必要先了解下HTML事件处理程序，也是最早的这一种的事件处理方式，代码如下：

<button type="button" onclick="showFn()"></button>

<script>
    function showFn() {
        alert('Hello World');
    }
</script>

以上代码我们通过直接在HTML代码里定义了一个onclick的属性触发showFn方法，这样的事件处理程序最大的缺点就是HTML于JS强耦合，我们一旦需要修改函数名就得修改两个地方。当然其优点是不需要操作DOM来完成事件的绑定。
那么什么是DOM0级处理事件呢？DOM0级事件就是将一个函数赋值给一个事件处理属性，比如：

<button id="btn" type="button"></button>

<script>
    var btn = document.getElementById('btn');
    
    btn.onclick = function() {
        alert('Hello World');
    }
    
    // btn.onclick = null; 解绑事件 
</script>

以上代码我们给button定义了一个id，通过JS获取到了这个id的按钮，并将一个函数赋值给了一个事件处理属性onclick，这样的方法便是DOM0级处理事件的体现。我们可以通过给事件处理属性赋值null来解绑事件。
DOM0级事件处理程序的缺点在于一个处理程序无法同时绑定多个处理函数，比如我还想在按钮点击事件上加上另外一个函数。
2.DOM2级事件
DOM2级事件在DOM0级事件的基础上弥补了一个处理程序无法同时绑定多个处理函数的缺点，允许给一个处理程序添加多个处理函数。代码如下：

<button id="btn" type="button"></button>

<script>
    var btn = document.getElementById('btn');
    
    function showFn() {
        alert('Hello World');
    }
    
    btn.addEventListener('click', showFn, false);
    
    // btn.removeEventListener('click', showFn, false); 解绑事件 
</script>

DOM2级事件定义了addEventListener和removeEventListener两个方法，分别用来绑定和解绑事件，方法中包含3个参数，分别是绑定的事件处理属性名称（不包含on）、处理函数和是否在捕获时执行事件处理函数。如果我们还需要添加一个鼠标移入的方法，只需要：

btn.addEventListener('mouseover', showFn, false);

这样点击按钮和鼠标移入时都将触发showFn方法。
需要注意的是IE8级以下版本不支持addEventListener和removeEventListener，需要用attachEvent和detachEvent来实现：

btn.attachEvent('onclick', showFn); // 绑定事件 
btn.detachEvent('onclick', showFn); // 解绑事件 

这里我们不需要传入第三个参数，因为IE8级以下版本只支持冒泡型事件。
3.DOM3级事件
DOM3级事件在DOM2级事件的基础上添加了更多的事件类型，全部类型如下：

UI事件，当用户与页面上的元素交互时触发，如：load、scroll
焦点事件，当元素获得或失去焦点时触发，如：blur、focus
鼠标事件，当用户通过鼠标在页面执行操作时触发如：dbclick、mouseup
滚轮事件，当使用鼠标滚轮或类似设备时触发，如：mousewheel
文本事件，当在文档中输入文本时触发，如：textInput
键盘事件，当用户通过键盘在页面上执行操作时触发，如：keydown、keypress
合成事件，当为IME（输入法编辑器）输入字符时触发，如：compositionstart
变动事件，当底层DOM结构发生变化时触发，如：DOMsubtreeModified
同时DOM3级事件也允许使用者自定义一些事件。

基本概念：DOM事件模型:

DOM事件模型：包括捕获和冒泡（ie用的是事件冒泡），捕获是从上往下到达目标元素，冒泡是从当前元素，也就是目标元素往上到window。是两个过程。

image.png

基本概念：DOM事件流:

事件流分三个阶段，第一阶段是捕获，第二阶段是目标阶段，比如点击的这个按钮，这个按钮就是目标阶段，事件通过捕获到达目标元素，就到达了目标阶段，第三个阶段是冒泡阶段，从目标元素再上传到window对象，就是冒泡的过程。

image.png

基本概念：DOM事件捕获的具体流程:

image.png

描述DOM事件捕获的具体流程捕获是从上到下，具体第一个真正接收的是window（对象）——第二个接收的是document（对象）——第三个接收的是html标签（怎么获取html标签>document.documentElement）——第四个接收的是body（document.body）——......(父级--子级，剩下的就是按照普通的html结构一层一层往下传)——最后到达目标元素。

描述DOM事件冒泡的具体流程（与事件捕获正好相反）：第Event对象的常见应用一个接收的是目标元素——第二个接收的是...（子级--父级，按照html结构一层一层往上传）——然后接收的是body标签——html标签——document对象——最后一个接收的是window对象。
;

基本概念：Event对象的常见应用:

1. event. preventDefault()

   取消事件的默认动作。

2. event.stopPropagation()

   阻止事件冒泡。

3. event.stopImmediatePropagation()

   阻止事件冒泡和该元素上的其他相同事件。

4. Event.currentTarget 【只读】

   当前注册事件的对象（当前元素）的引用。这个值会在传递的途中进行改变。

5. event.target 【只读】

   对事件起源目标（目标元素）的引用。

自定义事件：

image.png

用代码演示捕获 ：

<div id="ev">
        <style media="screen">
          #ev{
            width: 300px;
            height: 100px;
            background: red;
            color: #fff;
            text-align: center;
            line-height: 100px;
          }
        </style>
        目标元素
      </div>
      <script type="text/javascript">
        var ev = document.getElementById('ev');

        ev.addEventListener('click', function (e) {
            console.log('ev captrue');
        }, true);

        window.addEventListener('click', function (e) {
            console.log('window captrue');
        }, true);

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

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

        document.body.addEventListener('click', function (e) {
            console.log('body captrue');
        }, true);
     // 自定义的事件
        var eve = new Event('test');
        ev.addEventListener('test', function () {
            console.log('test dispatch');
        });
        setTimeout(function () {
            ev.dispatchEvent(eve);
        }, 1000);
      </script>
  </body>

image.png