JS — Day12 (делегирование события + прослушивание)

1. Клавиатурные события и объекты

①Обычно элементы событий клавиатуры представляют собой документ.

onkeyup: срабатывает при поднятии клавиатуры

onkeydown: срабатывает при нажатии на клавиатуру

onkeypress: срабатывает при генерации символа

ключ: введенный символ

ctrlKey: определить, нажат ли ctrl

②Совместимость для получения значения кода asc

var myKeyCode = e.keyCode || e.charCode || е.который;

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

2. Три способа привязки событий

① Связывание через элементы HTML

<button onclick="fun()">Подключить</button><br>

функция весело () {

console.log("Я хочу сделать пересадку волос");

}

② Связывание через элементы dom

var oBtn = document.getElementsByTagName("кнопка")[1];

oBtn.onclick = функция(){

console.log("привет");

}

Первые два дефекта: 1. Невозможно привязать одно и то же событие к одному и тому же элементу несколько раз. 2. Невозможно решить, является ли доставка потока событий всплывающей или перехваченной.

③Мониторинг событий

dom object.addEventListener («Удалить имя события on», функция обратного вызова, [capture|bubble]) true — захват, по умолчанию не записывается как false

Преимущества мониторинга событий: 1. Вы можете привязать одно и то же событие к одному и тому же элементу несколько раз. 2. Вы можете решить, будет ли передаваться поток событий путем всплытия или захвата.

(Примечание. Если всплывающее окно и захват происходят одновременно, сначала захватите, а затем всплывающее окно)

3. Отвязка события

① отвязать объект dom

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

     document.onclick = null;

② Отмена привязки мониторинга событий: убедитесь, что функция привязки и отвязки одинакова.

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

4. Делегация мероприятия

①Делегирование событий: полагаясь на механизм всплытия событий, позвольте родительскому элементу делать то, что делает дочерний элемент.

②Преимущества делегирования событий

1. Когда пакетные дочерние элементы ограничены по времени, операции, связанные с дочерними элементами, могут выполняться через родительский элемент для повышения эффективности.

2. События можно заранее привязывать к будущим дочерним элементам

классный случай

//委托的好处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;
        }
    }