day28补充（键盘事件，事件绑定，事件解绑，事件委托，以及综合案例：拖拽案例）

一.键盘事件以及对象

1.键盘弹起的时刻触发

	 document.onkeyup = function(){
	        console.log("嘿嘿");
	    }

2.键盘按下的时刻触发

	document.onkeydown = function(){
	        console.log("嘿嘿");
	    }

3.生成一个字符时触发

	document.onkeypress = function(){
	        console.log("嘿嘿");
	    }

4.键盘事件对象

1）获取录入的字符
	e.key
	document.onkeypress = function(evt){
	        var e = evt || event;
	        console.log(e.key);
	}
2）获取录入字符的asc码值
	document.onkeypress = function(evt){        
	        console.log(e.keyCode);
	        console.log(e.which);
	        console.log(e.charCode);
	        var myKeyCode = e.keyCode || e.which || e.charCode;
	        console.log(myKeyCode);
	}
3）判断ctrl是否被按下
	document.onkeypress = function(evt){ 
	    console.log(e.ctrlKey);
	    }
	        97 a
	        65 A
	        48 "0"
	        32 空格
	        13 回车
	        10 ctrl+回车

二.事件绑定的方式

1.第一种方法：HTML元素的直接绑定

	html：
	    <button id="btn" onclick="fun()">点击</button>
	script：
		function fun(){
		        console.log("嘻嘻嘻嘻");
		    }

2.第二种方法：通过dom对象的绑定

	html：
	    <button id="btn1">点击</button>
	script：
	    var oBtn1 = document.querySelector("#btn1");
	    oBtn1.onclick = function(){
	        console.log("hahahahaha");
	    }

3.以上 2 种方法绑定事件的缺陷

	1）无法为相同的元素多次绑定相同的事件
	    document.onclick = function(){
	        console.log(1111);
	    }
	    document.onclick = function(){----------------多次绑定相同事件的情况下只会显示第二个
	        console.log(2222);
	    }
	2）无法决定事件流的传递是冒泡还是捕获

4.第三种方法：事件监听

1）事件监听方法绑定的好处
	好处：
		1>可以为相同的元素多次绑定相同的事件
		2>可以决定事件流的传递是冒泡还是捕获
	注意点：
		当捕获和冒泡同时存在时，先捕获后冒泡（先由父向子传递，再由子向父传递）
2）语法
	事件元素.addEventListener("去掉on的事件类型",事件体回调函数,[捕获还是冒泡]);
	 方括号默认值为false（冒泡）；
	 方括号填写true是捕获；
	 
	 案例：
	    document.addEventListener("click",function(){
	        console.log(111);
	    });
	    document.addEventListener("click",function(){
	        console.log(222);
	    });

三.事件解绑

1.普通事件解绑

解绑原理：将绑定事件覆盖掉
 document.onclick = function(){
        console.log("小飞棍来喽!");
    }

    oBtn.onclick = function(){
        document.onclick = null;
    }

2.事件监听解绑

dom对象.removeEventListener("去掉on的事件类型",绑定时的同一个回调函数)
注意事项:事件的解绑必须和绑定回调函数是同一个
    var oBtn = document.querySelector("button");

    var fun = function(){
        console.log("小飞棍来喽!");
    }

    document.addEventListener("click",fun);------------回调函数不带括号

    oBtn.onclick = function(){
        document.removeEventListener("click",fun);
    }

四.事件委托

1.概念与好处

事件委托：依赖于冒泡机制，通过父元素实现子元素的功能
好处：
1.可以将子元素的批量事件绑定，单独绑定至父元素，提高程序运行效率
2.可以为未来添加的子元素提前绑定事件

2.案例

案例一：
		html：
	    <ul>----------------场景是存在很多个ul的子节点，比如以千数计或万数计的子节点，这个时候如果使用for循环来进行事件绑定，程序效率会特别的低，所以我们需要一个能提高代码效率的新方法
	        <li>1</li>
	        <li>2</li>
	        <li>3</li>
	        <li>4</li>
	        <li>5</li>
	        <li>6</li>
	        <li>7</li>
	        <li>8</li>
	        <li>9</li>
	        <li>10</li>
	        <li>11</li>
	        <li>12</li>
	        <li>13</li>
	        <li>14</li>
	        <li>15</li>
	        <li>16</li>
	        <li>17</li>
	        <li>18</li>
	        <li>19</li>
	        <li>20</li>
	    </ul>
	    script：
	    var oLis = document.getElementsByTagName("li");
	        oUl.onclick = function(evt){
	        this.style.backgroundColor = 'red'；--------此处使用this是错误的用法，this代表事件触发元素，这里用this操作对象就变成了整个ul而不是单个的li
	       此处需求:需要的是触发该事件的真正元素(子元素)，称其为目标元素
	        var e = evt || event;
	    目标元素是通过事件对象获取的
	        var target = e.target || e.srcElement;------------------兼容性获取真实操作对象
	
	                    
	        console.log(target,target.tagName);--------------------- 真实操作元素的标签名 大写
	
	        if(target.tagName == "LI"){
	            target.style.backgroundColor = 'red';
	        }
	    }
	    
	换个写法：使用事件监听来写这里的事件委托：
	      oUl.addEventListener("click",function(evt){
	        var e = evt || event;
	
	        var target = e.target || e.srcElement;
	
	        if(target.tagName == "LI"){
	            target.style.backgroundColor = 'red';
	        }
	    });


案例二：
		html：
		    <input type="text">
		    <ul>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		        <li></li>
		    </ul>
		    <button>添加</button>
		script：
		    var oInput = document.querySelector("input");
		    var oLis = document.getElementsByTagName("li");
		    var oUl = document.querySelector("ul");
		    var oBtn = document.querySelector("button");
		    
		    for(var i=0; i<oLis.length; i++){-----------------循环绑定事件
		        oLis[i].onmouseover = function(){------------------鼠标划入高亮，底色变黄
		            this.style.backgroundColor = 'yellow';
		        }
		        oLis[i].onmouseout = function(){
		            this.style.backgroundColor = '';-------------------------鼠标划出，高亮消失
		        }
		    }
		    
		    oBtn.onclick = function(){--------------------点击按钮，在ul末尾插入新的子节点，子节点innerhtml赋值为input输入框的value值
		        if(oInput.value != ""){
		            var oLi = document.createElement("li");
		            oLi.innerHTML = oInput.value;
		            oUl.appendChild(oLi);
		            oInput.value = "";
		        }
		        for(var i=0; i<oLis.length; i++){
		            oLis[i].onmouseover = function(){
		                this.style.backgroundColor = 'yellow';
		            }
		            oLis[i].onmouseout = function(){
		                this.style.backgroundColor = '';
		            }
		        }
		    }
		    
		使用事件委托来解决这个问题：
		    var oInput = document.querySelector("input");
		    var oLis = document.getElementsByTagName("li");
		    var oUl = document.querySelector("ul");
		    var oBtn = document.querySelector("button");
		    
		    oUl.onmouseover = function(evt){
		        var e = evt || event;
		        var target = e.target || e.srcElement;
		
		        if(target.tagName == "LI"){
		            target.style.backgroundColor = 'red';
		        }
		    }
		    
		    oUl.onmouseout = function(evt){
		        var e = evt || event;
		        var target = e.target || e.srcElement;
		
		        if(target.tagName == "LI"){
		            target.style.backgroundColor = '';
		        }
		    }
		
		    oUl.addEventListener("mouseover",function(evt){
		        var e = evt || event;
		        var target = e.target || e.srcElement;
		
		        if(target.tagName == "LI"){
		            target.style.backgroundColor = 'greenyellow';
		        }
		    });
		
		    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 = "";
		        }
		    }

五.拖拽案例

onmousedown盒子-包含：（按下之后左右移动，按下之后才存在松开）
    onmousemove   document
    onmouseup     通常用document

代码：
style：
    #box{
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
            cursor: move;
        }
html：
    <div id="box"></div>
script：
    var oBox = document.querySelector("#box");

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

        document.onmousemove = function(evt){
            var e = evt || event;

            oBox.style.left = e.pageX - a + "px";-------------涉及到作用域链问题，子函数可以使用父函数的内部变量，父函数不能使用子函数的内部变量
            oBox.style.top = e.pageY - b + "px";
            
            if(left < 0){
                left = 0;-----------------------当元素与窗口左间距为负时，强行规定左间距最小只能为0，不让元素左移超出可视窗口
            }

            var maxLeft = window.innerWidth - oBox.offsetWidth;

            if(left > maxLeft){--------------------当元素与窗口左间距间距超过最大值（可视窗口宽度减去元素本身宽度的距离）时，强行规定左间距最大只能为视窗口宽度减去元素本身宽度的距离，不让元素右移移超出可视窗口
                left = maxLeft;
            }

            if(top < 0){
                top = 0;
            }
            
            var maxTop = window.innerHeight - oBox.offsetHeight;

            if(top > maxTop){
                top = maxTop;
            }
            oBox.style.left = left + "px";
            oBox.style.top = top + "px";
        }
        document.onmouseup = function(){
            document.onmousemove = null;
        }
    }
    
可视窗口的宽和高：
    window.innerWidth
    window.innerHeight