fundamentos de DOM (X)

Categoría de evento

• Eventos del ratón

  • clic = mousedown + mouseup

    • Haga clic y arrastre para distinguir eventos utilizando el intervalo de tiempo entre mousedown y juzgar 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, contextual

• normas DOM3: haga clic en el botón izquierdo del evento sólo puede escuchar, sólo puede ser juzgado por izquierda y derecha mousedown botón del ratón y mouseup

  • e.button

    • 0: el botón izquierdo del ratón

    • 1: Wheel Mouse

    • 2: Derecho

• Eventos de teclado

  • keydown> pulsación de tecla> keyup

  • La diferencia entre la pulsación de tecla y keydown

    • keyDown cualquier respuesta clave, pero la vigilancia no es la clase de caracteres clave exacta

    • pulsación de tecla sólo responden a las clases de personajes clave de clase y personaje clave monitorización precisa, el código puede ser devuelto por ASCll String.fromCharCode()convierte en el método estático de caracteres correspondiente

  • keydown y pulsación de teclas en el teclado sin presionar a levantar el estado de gatillo continua, eventos de ratón no pueden activar de forma continua

    • juego de disparos es esta la verdad

• caso extremo móvil

  • touchstart, touchmove, touchend

• evento de manipulación del texto

  • de entrada, el cambio, el enfoque, desenfoque

    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 = '请输入关键字'}"
    >
  

• evento de clase de acción del formulario (evento en la ventana)

  • Desplazarse

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

  • cargar: o no utilice este método, el lento y carece de importancia

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