1. Eventos y objetos del teclado

①Por lo general, los elementos de evento de los eventos de teclado son documentos

onkeyup: activado cuando se levanta el teclado

onkeydown: se activa cuando se presiona el teclado

onkeypress: se activa cuando se genera un personaje

clave: el caracter ingresado

ctrlKey: determina si se presiona ctrl

②Compatibilidad para obtener el valor del código asc

var myKeyCode = e.keyCode || e.charCode || e.que;

 var myKeyCode = e.keyCode || e.charCode || e.which;
        console.log(String.fromCharCode(myKeyCode));
        console.log(myKeyCode);

2. Tres métodos vinculantes de eventos

① Enlace a través de elementos HTML

funcion divertida(){

console.log("Quiero un trasplante de cabello");

}

② Unión a través de elementos dom

var oBtn = document.getElementsByTagName("boton")[1];

oBtn.onclick = función(){

consola.log("hola");

}

Los dos primeros defectos: 1. No se puede vincular el mismo evento al mismo elemento varias veces 2. No se puede decidir si la entrega del flujo de eventos se está propagando o capturando

③Monitoreo de eventos

dom object.addEventListener("Eliminar el nombre del evento de encendido", función de devolución de llamada, [capturar|burbuja]) verdadero es captura, el valor predeterminado no está escrito como falso

Ventajas de la supervisión de eventos: 1. Puede vincular el mismo evento al mismo elemento varias veces 2. Puede decidir si el flujo de eventos pasa por burbujeo o captura

(Nota: cuando el burbujeo y la captura ocurren al mismo tiempo, capture primero, luego burbujee)

3. Desvinculación de eventos

① desvincular el objeto dom

   document.onclick = function(){
         alert("王者荣耀王者了嘛");
     }

     document.onclick = null;

② Desvinculación de la supervisión de eventos: asegúrese de que la función de vinculación y desvinculación sea la misma

    var fun = function(){
        alert("王者荣耀王者了嘛");
    }
    document.addEventListener("click",fun);
    document.removeEventListener("click",fun);

4. Delegación de eventos

①Delegación de eventos: confiando en el mecanismo de propagación de eventos, deje que el elemento principal haga las cosas del elemento secundario

②Beneficios de la delegación de eventos

1. Cuando los elementos secundarios del lote tienen un límite de tiempo, las operaciones relacionadas con los elementos secundarios se pueden realizar a través del elemento principal para mejorar la eficiencia

2. Los eventos se pueden vincular por adelantado para futuros elementos secundarios.

caso de aula

//委托的好处1:可以让批量子元素时间绑定时，通过父元素执行子元素相关操作，提升效率
//1000行LI点击谁谁高亮
oUl.addEventListener("click",function(evt){
        var e = evt || event;

        var target = e.target || e.srcElement;
        if(target.tagName == "LI"){
            target.style.backgroundColor = "green";
        }
       
        console.log(target.tagName);
    });


//委托的好处2:可以为未来的子元素，提前绑定事件
//LI点击谁谁高亮包括新追加的LI
    var oInput = document.querySelector("input");
    var oLis = document.getElementsByTagName("li");
    var oBtn = document.querySelector("button");
    var oUl = document.querySelector("ul");

    oUl.addEventListener("mouseover",function(evt){
        var e = evt || event;

        var target = e.target || e.srcElement;

        if(target.tagName == "LI"){
            target.style.backgroundColor = "hotpink";
        } 
    });

    oUl.addEventListener("mouseout",function(evt){
        var e = evt || event;

        var target = e.target || e.srcElement;

        if(target.tagName == "LI"){
            target.style.backgroundColor = "";
        } 
    });

    oBtn.onclick = function(){
        if(oInput.value != ""){
            var oLi = document.createElement("li");
            oLi.innerHTML = oInput.value;
            oUl.appendChild(oLi);
            oInput.value = "";
        }
    }


 //鼠标拖拽div
    var oBox = document.querySelector("#box");

    oBox.onmousedown = function (evt) {
        var e = evt || event;
        var offsetX = e.offsetX;
        var offsetY = e.offsetY;
        document.onmousemove = function (evt) {
            var e = evt || event;

            oBox.style.left = e.pageX - offsetX + "px";
            oBox.style.top = e.pageY - offsetY + "px";
        }
        document.onmouseup = function () {
            document.onmousemove = null;
        }
    }

JS--Day12 (delegación de eventos + escucha)