事件委托

键盘事件及对象

键盘事件
注意事项:通常情况下键盘事件的事件源都是document
键盘弹起的时刻触发
    document.onkeyup = function() {
        console.log("heihei");
    }
键盘按下的时刻触发
    document.onkeydown = function() {
        console.log("heihei");
    }
生成一个字符的时刻触发
    document.onkeypress = function() {
        console.log("heihei");
    }
----------------------------
键盘事件对象
document.onkeypress = function(evt) {
    var e = evt || event;
    获取键盘按下的字符的ASC码值
     console.log(e.keyCode, String.fromCharCode(e.keyCode));
     console.log(e.which);
     console.log(e.charCode);
     兼容写法
    var key = e.keyCode || e.which || e.charCode;
    console.log(key, String.fromCharCode(key));
​
    48   "0"
    97   "a"  
    65   "A"   
    32    空格
    13    回车
    10    ctrl+回车
    ctrlKey判断ctrl是否被按下
    console.log(e.ctrlKey);
}

事件绑定的方式

1.通过HTML元素直接绑定
    <button onclick="fun()">点击</button>
    <button id="btn">点击啊</button>
2.通过js对象绑定
    var oBtn = document.querySelector("#btn");
    oBtn.onclick = function() {
    console.log("今天要下雨");
    }
---------------------------------
以上两种绑定方式不能完成一些功能:
1.不能为相同的元素多次绑定相同的事件   
    var a;
    a = 123;
    a = 456;
    document.onclick = function() {
        console.log("yingyingying");
    }
    document.onclick = function() {
        console.log("heiheihei");
    }
2.无法决定事件流的传递是冒泡还是捕获
​
---------------------------------------
3.事件监听
    好处
        1.可以为相同的元素多次绑定相同的事件
        2.可以决定事件流的传递是冒泡还是捕获
                                                默认不写或flase为冒泡,true捕获
事件元素.addEventListener("去掉on的事件类型","事件体回调函数",["捕获还是冒泡"]);
    document.addEventListener("click", function() {
        console.log("heihei");
    });
    document.addEventListener("click", function() {
        console.log("haha");
    });
//当捕获和冒泡同时存在于一个元素时，先捕获后冒泡

事件绑定的取消

解绑的核心思想就是去掉原来绑定的函数对象
1.js方式的解绑
    var oBtn = document.querySelector("button");
    oBtn.onclick = function() {
        console.log("heihei");
    }
    oBtn.onclick = null;
2.事件监听的解绑
    var fun = function() {
        console.log(123);
    }
    document.addEventListener("click", fun);
    //注意事项:addEventListener和removeEventListener的回调函数必须是同一个
    document.removeEventListener("click", fun);

事件委托

委托:自己事情让别人干 
委托的本质是依赖于事件冒泡
好处
场景1:
批量绑定若干子元素的事件,可以大大提高程序绑定事件的效率
var oLis = document.getElementsByTagName("li");
for (var i = 0; i < oLis.length; i++) {
    oLis[i].onclick = function() {
        this.style.backgroundColor = "yellow";
    }
}
var oUl = document.querySelector("ul");
oUl.onclick = function(evt) {
    // 委托中，被被点击的元素不是this
    // this是父元素
    // this.style.backgroundColor = "yellow";
    // 如何获取真实的操作元素
    var e = evt || event;
    // target被操作的真实元素
    var target = e.target || e.srcElement;
    // tagName操作元素的名字，且为大写
    console.log(target.tagName);
​
    if (target.tagName == "LI") {
        target.style.backgroundColor = "yellow";
    }
}

事件委托的好处

好处2:
场景:为未来添加的子元素提前绑定事件

拖拽

拖拽相关的事件
onmousedown   box
onmousemove   document
onmouseup     document
​
onmousedown包含move和up
也就是说down了之后，才绑定了move和up事件
 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;
    }
}
​
//可视窗口的高,可视窗口的宽
console.log(innerWidth, innerHeight);