JS基础-事件

事件

用户的行为：onclick、ondblclick、onfocus、onblur、window.onload
是用户跟页面的交互，当用户跟页面进行一些“交流”的时候，页面通过js就会触发一些事件，比如鼠标点击的时候就会触发onclick事件，给这个事件绑定一个函数，那么这个时候函数就会被调用，代码就会被执行。

事件类型：

鼠标事件：click，dbclick，mousedown，mouseup，mouseover，
    mouseout，mouseenter（鼠标穿过元素）、mouseleave（鼠标离开元素）、
    mousemove、scroll（适用于所有可以滚动的元素和window对象）、mousewheel
    鼠标滚轮、contextmenu  鼠标右键（上下文菜单：在不同环境下右键菜单不一样）

    其中
    mouseover：鼠标在元素身上移动穿过子元素的时候会被反复触发
    mouseenter：只是在进入元素的时候触发

键盘事件：keydown，keyup，keypress

事件举例:

<div id="box">box</div>
        <script>
            var box = document.getElementById("box");
            //绑定事件
            box.onclick = function(){
                alert("click");
            }
            
            function foo(){
                alert("foo");
            }
            
            box.onmouseover = foo;
            
        </script>

表单事件：对表单元素操作之后会触发的事件

  单选框、多选框、下拉菜单 状态改变的时候会触发  onchange 事件。
  表单提交的时候会触发 onsubmit   触发在<form>元素身上。

表单事件举例:

<form id="form">
            <input type="text" id="num">
            <select id="sel">
                <option>成都</option>
                <option>北京</option>
                <option>上海</option>
            </select>
            <input type="checkbox" id="check">
            
            <button type="button">按钮</button>
            <input type="submit" value="提交" id="btn">
        </form>
        <script>
            var input = document.getElementById("num");
            input.onfocus = function(){
                console.log("获得焦点");
            
            }
            input.onblur = function(){
                console.log("失去焦点");
                //console.log(input.value);
                var value = this.value;
                //是否大于6位
                if(value.length > 6){
                    console.log("满足要求");
                    
                }else{
                    console.log("请输入大于6位");
                }
            }
            
            var sel = document.getElementById("sel");
            //重新选择的时候,触发onchange事件
            sel.onchange = function(){
                console.log(this.value);
            }
            
            var check = document.getElementById("check");
            check.onchange = function(){
                console.log(this.checked); //是否选中的状态(true\false)
            }
            
            var form = document.getElementById('form');
            console.log(btn);
            form.onsubmit = function(e){
                //表单提交事件
                console.log("提交");
                e.preventDefault();
                return false;
            }
        </script>

this关键字:事件函数里面的this指的是事件触发对象。
事件的原理和hover类似。可以做到:hover做不到的事，:hover只能操作当前的元素，但是事件绑定之后可以选择任何元素。

事件触发三要素：通过谁触发？通过什么触发？触发后要做什么？
事件的写法：

w3c标准：事件写在行内，但是因为结构和行为要分离，所以我们一般情况下用JavaScript的方法来绑定事件，只有再极少数情况下，才将事件写在行内，事件的绑定方法：

浏览器中的节点(对象).on+事件句柄 = function( ){
要干什么？（放在浏览器中，不执行，当事件发生的时候再执行。）
}

oDiv.onclick=function(){     

 alert（1）

}
事件总结：事件是给浏览器定义一个预处理函数，当事件触发的时候，执行函数，这就是事件。
事件对象兼容写法： e=e || window.event;

鼠标事件.png

案例：一串div跟着鼠标移动

<style>
            div{height: 20px;width: 20px;background: red;position: absolute;}
        </style>
    </head>
    <body>
        <script>
            var aDiv = [];
            var cache = document.createDocumentFragment();
            for(var i = 1; i <= 20; i++){
                var div = document.createElement("div");
                div.innerHTML = i;
                aDiv.push(div);
                //document.body.appendChild(div);
                cache.appendChild(div);
            }
            document.body.appendChild(cache);
            
            //document绑定mousemove事件
            document.onmousemove = function(e){
                e = e || event;
                var mouseX = e.clientX,
                    mouseY = e.clientY;
                
                /* aDiv[0].style.left = mouseX + "px";
                aDiv[0].style.top = mouseY + "px"; */
                
                //从后往前,一次进一步
                for(var i = aDiv.length-1; i > 0; i--){
                    aDiv[i].style.left = aDiv[i-1].style.left;
                    aDiv[i].style.top = aDiv[i-1].style.top;
                }
                //第0个赋值未当前鼠标坐标
                aDiv[0].style.left = mouseX + "px";
                aDiv[0].style.top = mouseY + "px";
                
            }
        </script>
    </body>

键盘事件：keydown、keyup、keypress

document.onkeydown = function(e){
    console.log(e.keyCode)   
}

键盘上每一个键都有一个唯一的编码，用来识别当前用户正在操作的是键盘上哪一个键.

有兼容问题兼容写法：e.keyCode || e.which

特殊键码：是否按下alt ctrl 和 shift
e.altKey
e.ctrlKey
e.shiftKey
返回值是布尔值；
可以用来判断组合键

if（e.keyCode==13&&e.altKey）{
     alert('同时按下了enter和alt')；
}

默认行为（浏览器）

有一些html元素默认的行为，比如说a标签，点击后有跳转动作；form表单中的submit类型的input有一个默认提交跳转事件；reset类型的input有重置表单行为。
但是，有些时候我们是不需要默认事件的，所以就需要阻止默认事件.

方法1.return false；

方法2.
if(e.preventDefault) {
      e.preventDefault();
      }
else {
    window.event.returnValue = false;    
    //return false;
}

一个完整事件包含捕获阶段 ---> 目标阶段 --->冒泡阶段
子元素的事件被触发时，父级也会被触发（冒泡）

<body>
        <div id="yeye">
            <div id="baba">
                <div id="erzi"></div>
            </div>
        </div>
        <script>
            yeye.onclick = function(){
                console.log("yeye");
            }
            baba.onclick = function(e){
                console.log("baba");
                //阻止冒泡
                e.stopPropagation();
                e.cancelBubble=true;//兼容IE
            }
            erzi.onclick = function(){
                console.log("erzi");
            }
        </script>
    </body>

冒泡是可以阻止的

 e.stopPropagation( );
 e.cancelBubble=true;//兼容IE

事件监听

DOM2级事件处理是所有DOM节点中的方法，可以重复绑定，但是浏览器兼容存在问题；

 //DOM2级
if(window.attachEvent){
    oDiv.attachEvent("onclick", function(){ ... });  // IE只有冒泡阶段,所以没有第三个参数，而且需要加on；
}else{
    oDiv.addEventListener( "click", function(){ ... },false);  // false指冒泡阶段
}

/* 监听事件
     * @param obj DOMObj 监听事件的对象
     * @param type string 事件句柄
     * @param fn   function 事件处理函数 
     * @param [isCapture] boolean false代表冒泡，true代表捕获 默认值是false
     */
    on : function(obj, type, fn, isCapture){
        if(isCapture === undefined) isCapture = false;
        if(obj.attachEvent){
            //IE只能再冒泡阶段处理事件
            obj.attachEvent("on"+type, fn);
        }else{
            obj.addEventListener(type, fn, isCapture);
        }
    },

<body>
        <div id="yeye">
            <div id="baba">
                <div id="erzi"></div>
            </div>
        </div>
        <script>
            //绑定只能绑一个,后面覆盖前面
            /* yeye.onclick = function(){
                console.log("yeye");
            }
            yeye.onclick = function(){
                console.log("yeye2222");
            } */

            //监听事件,可以同时监听多个
            //第三个参数传false代表不捕获(再冒泡阶段处理事件)
            //第三个参数传true代表捕获(再冒捕获段处理事件)
//          yeye.addEventListener("click", function(){
//              console.log("yeye");
//          },true);
//          
//          yeye.addEventListener("click", function(){
//              console.log("yeye222");
//          },true);
//          
//          baba.addEventListener("click", function(){
//              console.log("baba");
//          },true);
//          
//          erzi.addEventListener("click", function(){
//              console.log("erzi");
//          },true);

            tools.on(yeye, "click", function(){
                console.log("yeye");
            })
        </script>
    </body>

移除事件监听，第二个参数为必须，移除的事件处理函数

oDiv.removeEventListener( "click",fn）

oDiv.detachEvent("onclick",fn)

事件委托（事件代理）委派

事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以处理某一类型的所有事件

使用场景主要用于事件源不确定的情况，可以把事件委托给父级
判断事件源：
e.target || e.srcElement

<body>
        <ul>
            <li>item1</li>
            <li>item2</li>
            <li>item3</li>
            <li>item4</li>
        </ul>
        <button>按钮</button>
        <script>
            var ul = document.querySelector("ul");
            /* var aLi = document.querySelectorAll("li");
            aLi = Array.from(aLi);
            console.log(aLi);
            aLi.forEach(function(li, index){
                li.onclick = function(){
                    console.log(this.innerHTML);
                }
            }) */
            
            //事件委托
            ul.onclick = function(e){
                e = e || event;
                //获取事件源
                var target = e.srcElement || e.target;
                if(target.nodeName === "LI")
                    console.log(target.innerHTML);
                
                //this
            }
            
            document.querySelector("button").onclick = function(){
                var li = document.createElement("li");
                li.innerHTML = "wgrf";
                ul.appendChild(li);
            }
            
        </script>
    </body>