一.键盘事件及对象

①通常情况下，键盘事件的事件元素都是document

onkeyup:键盘抬起的时刻触发

onkeydown:当键盘被按下时，触发

onkeypress:生成一个字符时触发

key:录入的字符

ctrlKey:判断ctrl是否被按下

②兼容性获取asc码值

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

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

二.事件的三种绑定方式

①通过HTML元素进行绑定

function fun(){

console.log("我要植发");

}

②通过dom元素进行绑定

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

oBtn.onclick = function(){

console.log("嘿嘿");

}

前两种缺陷:1.无法为相同的元素多次绑定相同的事件2.无法决定事件流的传递是冒泡还是捕获

③事件监听

dom对象.addEventListener("去掉on的事件名",回调函数,[捕获|冒泡]) true为捕获,默认不写为false

事件监听优点: 1.可以为相同的元素多次绑定相同的事件2.可以决定事件流的传递是冒泡还是捕获

（注意：当冒泡和捕获同时出现时，先捕获，后冒泡）

三.事件解绑

①dom对象解绑

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

     document.onclick = null;

②事件监听的解绑:保证绑定和解绑的函数是同一个

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

四.事件委托

①事件委托:依赖于事件冒泡机制,子元素的事让父元素干

②事件委托的好处

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;
        }
    }

JS--Day12(事件委托+监听)