DOM知识概要

事件机制
  1.事件处理程序

    为了在用户点击元素时执行代码,请向HTML事件属性添加JavaScript代码：
    <div id="one" onclick="test(event)">点击我啊</div>
    <button id="btn">点击我</button>
     window.onload = function () {
      // 获取btn
      var btn=document.getElementById('btn');
      // 获取div
      var div=document.getElementsByTagName('div')[0];
      //点击按钮修改div的样式
      btn.onclick=function(){
        alert('我被点击了');
        div.style.width='200px';
        div.style.height='200px';
        div.style.backgroundColor='red';
        div.innerHTML='我被点击了'
      }
    }
    function test(event) {
        alert(1);
        console.log(1,event);
    }

---

  2.事件由三部分构成
    事件源 事件类型 事件处理程序 我们也称为事件三要素
    1.事件源：事件被触发的对象 -->按钮对象
    2.事件类型：如何触发？触发什么事件？例如鼠标点击，键盘按下等…
    3.事件处理程序：通过一个函数赋值的方式
    执行事件的步骤
      1.获取事件源
      2.注册事件（绑定事件）
      3.采用函数赋值形式添加事件处理程序

---

  3.事件冒泡
    在第四代Web浏览器（IE4和Netscape Communicator4）开始开发时，
    开发团队碰到了一个有意思的问题：页面哪个部分拥有特定的事件呢？
    要理解这个问题，可以在一张纸上画几个同心圆。把手指放到圆心上，
    则手指不仅是在一个圆圈里，而且是在所有的圆圈里。
    两家浏览器的开发团队都是以同样的方式看待浏览器事件的。
    当你点击一个按钮时，实际上不光点击了这个按钮，还点击了它的容器
    以及整个页面。事件流描述了页面接收事件的顺序。
    结果非常有意思，IE和Netscape 开发团队提出了几乎完全相反
    的事件流方案。IE将支持事件冒泡流，而NetscapeCommunicator将支持事件捕获流。

      1.事件冒泡(IE事件流)
      var inner = document.getElementById('inner');
      var center = document.getElementById('center');
      var outer = document.getElementById('outer');
      // 当我们只有一个inner点击方法的时候 我们发现想要实现的效果和我们预期的一样
      inner.onclick = function () {
        console.log('我是inner点击的');
      }
      // 但是当我们给inner的父元素和祖先元素也添加点击事件时 一点击inner 所有祖先元素的事件都会被触发，这就是事件冒泡现象
      center.onclick = function () {
        console.log('我是center点击的');
      }
      outer.onclick = function () {
        console.log('我是outer点击的');
      }

      outer.onclick = function (event) {
        console.log(event);
        console.log(this);
        // 事件目标，触发事件的源元素
        console.log(event.target);
        // 当前事件目标，当前执行事件处理函数的元素
        console.log(event.currentTarget);
        console.log(this === event.currentTarget); 

 }
      //查看文档中
      function handle(event) {
        console.log(this);
        console.log(event.target);
        console.log('--------');
      }
      // handle()
      outer.onclick = handle;
      center.onclick = handle;
      inner.onclick = handle;
    在点击页面中的id为inner的div元素，click事件会以如下顺序发生
      1. div#inner
      2. div#center
      3. div#outer
      4. body
      5. html
      6. document

---

  4.阻止事件冒泡
      event.stopPropagation()
      如果点击方法时需要同时传递其他参数和event，直接传递event这个单词即可

---

  5.事件捕获(Netscape事件流)
    Netscape Communicator 团队提出了另一种名为事件捕获的事件流。
    事件捕获的意思是最不具体的节点应该最先收到事件，
    而最具体的节点应该最后收到事件。事件捕获实际上是为了在事件到达
    最终目标前拦截事件。如果前面的例子使用事件捕获，则点击div元素
    会以下列顺序触发 click 事件：
    1. document
    2. html
    3. body
    4. div

---

  6.DOM事件流(事件冒泡和事件捕获)*******
    描述的是从页面接收事件的顺序
    事件冒泡(从内向外):最具体的节点应该最先收到事件，不具体的节点最后收到事件
    事件捕获(从外向内):不具体的节点应该最先收到事件，而最具体的节点应该最后收到事件。

---

  7.阻止事件默认行为
    var btn=document.getElementsByTagName('button')[0];
      var a=document.getElementsByTagName('a')[0];
      btn.οnclick=function(event){
        event.preventDefault()
      }
      a.οnclick=function(event){
        event.preventDefault()
      }

---

  8.DOM0级事件 DOM2级事件
    DOM2级事件
    addEventListener()
    它们接收 3 个参数：事件名、事件处理函数和一个布尔值，
    true 表示在捕获阶段调用事件处理程序，false（默认值）
    表示在冒泡阶段调用事件处理程序。
    removeEventListener()
    var outer=document.getElementById('outer');
      var center=document.getElementById('center');
      var inner=document.getElementById('inner');
      function handler(){
        console.log(this.id);
      }
      outer.addEventListener('click',handler,true);
      center.addEventListener('click',handler,true);
      inner.addEventListener('click',handler,true);
    }

---

  9.事件代理(事件委托)
  将本应该添加给子元素的事件添加给父元素
  事件委托就是当事件触发时，把要做的事委托给父元素（或父元素的父元素）
  来处理。也就是：利用冒泡的原理，把事件加到父级上，
  通过判断事件来源的子集，执行相应的操作。使用事件委托技术能让你
  避免对特定的每个节点添加事件监听器。
      list.οnclick=function(event){
        switch(event.target.id){
          case 'one':
          event.target.innerHTML='我是One'
          break;
          case 'two':
          event.target.innerHTML='我是two'
          break;
          case 'three':
          event.target.innerHTML='我是three'
          break;
        }
      }
  

---

  10.事件类型
    1.鼠标滚动事件onscroll
    <div id="d1" style="width: 100px;height: 100px;border: 1px solid; overflow: auto;">我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签我是div标签</div>
    <script>
      var d1 = document.getElementById('d1');
      d1.onscroll = function () {
        console.log('onscroll');
      }
    </script>
    2.焦点事件
    blur  当元素失去焦点时触发。这个事件不冒泡，所有浏览器都支持。
    focus    当元素获得焦点时触发。这个事件不冒泡，所有浏览器都支持。
    <input type="text" id="inp1">
    <script>
      var inp1 = document.getElementById('inp1');
      // 失去焦点触发
      inp1.onblur = function () {
        console.log('失去焦点');
        console.log(this.value);
      }
      // 获得焦点触发
      inp1.onfocus = function () {
        console.log('获得焦点');
      }
    </script>
    3.鼠标事件
    <div id="d1"></div>
    <script>
      var d1 = document.getElementById('d1');
      // 单击事件
      d1.onclick = function (event) {
        console.log('click');
        console.log(event);
      }
      // 双击事件
      d1.ondblclick = function () {
        console.log('dblclick');
      }
      // 鼠标移入事件
      d1.onmouseenter = function () {
        console.log('mouseenter');
      }
      // 鼠标移出事件
      d1.onmouseleave = function () {
        console.log('mouseleave');
      }
      // 鼠标在元素内部移动时触发
      d1.onmousemove = function () {
        console.log('mousemove');
      }
    </script>
    4.键盘事件
    <input type="text" id="inp1">
    <script>
      var inp1 = document.getElementById('inp1');
      // 按下某个按键是触发
      inp1.onkeydown = function (event) {
        if (event.keyCode == 13) {
          console.log('确认');
          console.log(this.value);
        }
      }
      // 按下键盘上某个键并产生字符时触发，而且持续按住会重复触发
      inp1.onkeypress = function (event) {
        console.log(event.keyCode);
      }
      // 用户释放键盘上某个键时触发
      inp1.onkeyup = function (event) {
        console.log(event.keyCode);
      }
    </script>

  重要：：：： console.log(this===event.currentTarget);  //true