JavaScript的学习笔记（day13）

1.事件机制

1.1 事件的组成部分

事件源：事件被触发的对象
事件类型：如何触发？触发的是什么事件？
事件处理程序：通过函数进行处理事件

1.2 事件的执行步骤

获取事件源
注册事件
采用函数赋值的方式进行添加事件处理程序

1.3 常见事件类型

用户点击鼠标时
网页加载完成后
图像加载完成后
页面中表单提交时

2.事件流

2.1 事件冒泡（IE事件流）

概念：事件从最具体的元素开始触发，逐步向上级元素传播

阻止事件冒泡
event.stopPropagation()方法，event可以由点击方法直接传递event
如：onclick="test(123,event)"

2.2 事件捕获流（Netscape事件流）

概念：与事件冒泡相反，事件由最外层的节点先收到事件，然后逐步向最具体的节点传播
事件捕获的目的是为了让事件到达最终目标前拦截事件。

2.3 DOM事件流

概念：DOM2事件流分为三个阶段，分别是事件捕获，到达目标和事件冒泡，在DOM事件流中
事件捕获最先开始，为拦截事件提供了可能。

3.事件处理程序

3.1 HTML事件处理程序

直接在标签属性中执行js代码：

<button onclick="console.log('Clicked')">点我啊</button>

注意：由于这种交互能力是通过onclick属性来执行js代码来实现的，又因为属性的值是js代码，因此不能在未经过转义的情况下使用HTML的语法字符，只能使用单引号等非HTML语法字符。

通过在script标签种定义点击函数实现交互：

   <!-- 需要加() -->
      <button onclick="showMsg()">点我啊</button>
      <script>
        function showMsg() {
          console.log('Hello Wolrd!');
        }
      </script>

注意：在使用onclick属性执行js代码时，代码中的this指向的时当前的标签

3.2 DOM0事件处理程序

概念：在script标签中通过getElementById方法获取到需要实现交互的节点，通过获取到的节点调用onclick并为其赋值一个执行函数来实现事件。

 <button id='btn'>点我啊</button>
    <script>
      var btn = document.getElementById('btn');
      btn.onclick = function () {
        console.log('我被点击了');
        console.log(this.id); //btn
      }
    </script>

注意：事件处理程序会在元素作用域中进行，因此this会指向当前节点。
移除事件处理程序：btn.onclick = null;

3.3 DOM2事件处理程序

参数：事件名，事件处理函数，事件调用的时间（false默认，表示在事件冒泡阶段调用，true表示在事件捕获阶段调用）
添加事件处理程序：addEventListener()

   <button id='btn'>点我啊</button>
      <script>
        var btn = document.getElementById("btn");
        btn.addEventListener("click", function () {
          console.log('我被点击了');
        }, false);
      </script>

注意：addEventListener方法不仅可以为该节点添加一个事件处理程序，而且可以添加多个事件处理程序

移除事件处理程序：removeEventListener()

通过addEventListener方法添加的事件处理程序只能由removeEventListener方法传入相同的参数来移除，但是由于上面的添加方法是通过匿名函数的方式传入的事件执行函数，因此想要移除需要将这个匿名函数抽出来使用变量来接收。

  	  <button id='btn'>点我啊</button>
      <script>
        var btn = document.getElementById("btn");
        // 新增一个方法
        var handler = function () {
          console.log(this.id);
        }
        btn.addEventListener("click", handler, false);
        // 移除
        btn.removeEventListener("click", handler, false); // 有效果
      </script>

4.事件对象

event对象：在DOM事件发生时，所有的相关信息都会存储在这个对象中，如导致事件的元素，事件类型等
注意：event对象只在事件处理程序执行期间存在，事件处理程序执行完毕就会被销毁
阻止默认事件的发生：preventDefault()方法（event对象调用）
使用方法：在需要阻止默认事件的函数中直接调用

5.事件委托

概念：利用事件冒泡的特性，将需要处理的事件交给父元素进行处理，当事件发生时，由于事件冒泡的原理会向上级元素传播，而父元素通过判断事件来源的子集，执行相应的操作，以此避免对每个节点都添加事件监听器

  <script>
    var list = document.getElementById("myLinks");
    list.addEventListener("click", function (event) {
      var target = event.target;
      console.log(target);
      switch (target.id) {
        case "li1":
          target.innerHTML = 'SuZhou';
          break;
        case "li2":
          target.innerHTML = 'Coding';
          break;
        case "li3":
          target.innerHTML = 'Hi';
          break;
      }
    });
  </script>

事件委托的好处：不会导致先期延迟 占用内存少

6.事件类型

用户界面事件（UIEvent）：涉及与 BOM 交互的通用浏览器事件。

load：在window上页面加载完成后触发 在img元素上当图片加载完成后触发 在object元素上当响应对象加载完成后触发
unload：当页面完全卸载后在window上触发 当所有框架卸载完成后在框架上触发 当嵌入的内容完全卸载后在object上触发
select：在完本框中选择了一个或多个字符时触发
resize：在window上窗口被缩放时触发
scroll：当用户滚动包含滚动条的元素时触发

焦点事件（FocusEvent）：在元素获得和失去焦点时触发。

blur：失去焦点时触发，不冒泡
focus：获得焦点时触发，不冒泡
focusin：获得焦点时触发，冒泡
focusout：失去焦点时触发，冒泡 鼠标事件（MouseEvent）：使用鼠标在页面上执行某些操作时触发。
click：单机鼠标主键或摁下回车时触发
dbclick：双击鼠标主键时触发
mousedown：摁下鼠标任意键时触发，不能通过键盘触发
mouseenter：当鼠标从元素外部移入元素内部时触发，不冒泡
mouseleave：当鼠标从元素内部移出元素时触发，不冒泡
mouseout：把鼠标从一个元素移到另一个元素上时触发
mouseover：把鼠标从元素外部移入元素内部时触发
mouseup：当释放鼠标键时触发

滚轮事件（WheelEvent）：使用鼠标滚轮（或类似设备）时触发。

mousewheel：鼠标滚轮事件

键盘事件（KeyboardEvent）：使用键盘在页面上执行某些操作时触发。

keydown：摁下键盘上的某个键时触发，摁住会连续触发
keypress：摁下键盘上的某个键时触发，摁住会持续触发 废弃，被替换成textInput事件
keyup：释放键盘上某个键时触发