DOM基础知识（十）

事件分类

• 鼠标事件

  • click = mousedown + mouseup

    • 区分点击事件和拖拽就利用mousedown和mouseup之间的时间间隔来判断

      var start = 0,
        end = 0,
        key = false;
      document.onmousedown = function () {
        start = new Date().getTime();
      }
      document.onmouseup = function () {
        end = new Date().getTime();
        if (end - start < 300) {
          key = true;
        } else {
          console.log('拖拽');
        }
      }
      document.onclick = function () {
        if (key) {
          console.log('click');
          key = false;
        }
      }
    

  • mouseover、mouseout、( HTML4.x )

  • mouseenter、mouseleave、( HTML5 )

  • mousemove、contextmenu

• DOM3标准规定 : click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标的左右键

  • e.button

    • 0 : 鼠标左键

    • 1 : 鼠标滚轮

    • 2 : 鼠标右键

• 键盘事件

  • keydown > keypress > keyup

  • keydown和keypress的区别

    • keydown可以响应任意按键，但监测字符类按键是不精准的

    • keypress只能响应字符类按键且精准监测字符类按键，返回的ASCLL码可以通过 String.fromCharCode()静态方法转换成相应字符

  • keydown和keypress在键盘按下不抬起的状态下可以连续触发，鼠标事件不可以连续触发

    • 射击类游戏就是此道理

• 移动端事件

  • touchstart、touchmove、touchend

• 文本操作事件

  • input、change、focus、blur

    var input = document.getElementsByTagName('input')[0];
    input.oninput = function (e) {
      console.log(this.value);
    }
  
    // 比较聚焦和失去焦点两个状态是否有改变，有改变则触发该事件
    input.onchange = function (e) {
      console.log(this.value);
    }
  

    // 典型含提示语输入框
    <input 
      type="text" 
      value='请输入关键字' 
      onfocus="if(this.value === '请输入关键字'){this.value = ''}"
      onblur="if(this.value === ''){this.value = '请输入关键字'}"
    >
  

• 窗体操作类事件( window上的事件 )

  • scroll

    // 求滚动条滚动距离的属性
    window {
      pageXoffset,
      pageXoffset
    }
  

  • load : 还是别用这个方法了，又慢又没啥意义

    // 页面下载完毕 && rendertree构建完毕 && 资源文件下载完毕 && 才会触发load事件
    window.onload = function(){}