事件

事件基础

事件函数：当事件被触发时调用的函数

<script>
	obj.onclick = function(){}  // onclick后面的函数就是事件函数
    obj.onclick = function(){
        fun()      //  事件函数
    }
</script>

事件对象:当事件发生的时候，浏览器会将事件相关信息保存在内置全局对象window.event中，可以直接使用，window可以省略，其中包含事件类型、操作对象、鼠标位置等

<script>
	document.onclick = function(ev){
        var ev = window.event || ev;  //  兼容
        /*  事件对象属性
         type:  获取事件类型
         target(srcElement(ie8-))： 获取触发事件的对象
         clientX 、clientY： 获取当前鼠标的位置，相对于屏幕
         pageX 、pageY： 获取当前鼠标的位置，相对于页面
         offsetX 、offsetY： 获取当前鼠标的位置，相对于自身左上角
         是否按了对于的功能键： shiftKey 、ctrlKey 、 altKey   布尔值
         */
    }
</script>

事件绑定与取消

<script>
//  事件绑定  同一个元素的同一个事件可以有多个事件处理函数
//  事件绑定需要进行兼容处理，在标准浏览器中和IE中的添加方式不同
/*  标准浏览器 ： obj.addEventListner(type（不加on）,事件处理函数，是否捕获（true/false）)  默认是false：冒泡   true: 捕获
	obj.addEventListner('click',fun，false)
	ie浏览器 ： obj.attachEvent(type(加on)，事件函数)
	obj.attachEvent('onclick'，fun)
*/
//  事件绑定兼容
    if(obj.addEventListner){   
        obj.addEventListner('click',fun)
    }else{
        obj.attachEvent('onclick'，fun)
    }
//  事件绑定封装
    addL(div,'click',fun)
    function addL(obj,type,fun,flag) {
        if(obj.attachEvent){
            obj.attachEvent('on'+type,fun);
        }else{
            obj.addEventListener(type,fun,flag);
        }
    }
</script>

标准浏览器的事件绑定与ie浏览器的事件绑定的区别：

• ie没有捕获，标准有捕获
• ie的事件名称前面有on，标准没有
• 标准的ie会根据事件的顺序正序执行，非ie标准逆序，标准正序
• ie的this是window，标准的是触发这个事件的对象
• 标准浏览器的事件绑定与ie浏览器的事件绑定是不共存的，需要进行一个兼容的操作，一般情况下，如果是两个方法的兼容，拿出其中一个方法，在各个浏览器中查看获取的值，标准浏览器与ie浏览器会得到不一样的结果。

<script>
//  事件取消
/*  标准浏览器 ： obj.removeEventListner(type（不加on）,事件处理函数，是否捕获（true/false）)  默认是false：冒泡   true: 捕获
	obj.removeEventListner('click',fun，false)
	ie浏览器 ： obj.detachEvent(type(加on)，事件函数)
	obj.detachEvent('onclick'，fun)
*/
//  事件移除封装
    delF(div,'click',fun)
    function delF(obj,type,fun) {
        if(obj.detachEvent){
            obj.detachEvent('on'+type,fun)
        }else {
            obj.removeEventListener(type,fun)
        }
    }
</script>

DOM事件流：事件发生时会在元素节点之间按照特点的顺序传播，路径所经过的所有节点都会收到该事件，这个传播过程即DOM事件流

DOM事件流会有3个阶段：

• 事件捕获阶段：事件的传播是从最不特定的事件目标到最特定的事件目标。即从DOM树的根到叶子。
• 确定目标阶段：通过捕获确定具体触发事件的元素
• 事件冒泡阶段：事件的传播是从最特定的事件目标到最不特定的事件目标。即从DOM树的叶子到根。

事件传播的顺序对应浏览器的两种事件流模型：捕获型事件流和冒泡型事件流

事件冒泡

在javaScript中，默认是事件冒泡事件流机制，即当一个元素接收事件，会把接收到的事件依次传给它的父元素一直到window

<div id="box1">
    <div id="box2">
        <div id="box3"></div>
    </div>
</div>
<script>
	var oDiv = document.getElementsByTagName('div')
    oDiv[0].onclick = function(){alert(this.id);};
    oDiv[1].onclick = function(){alert(this.id);};
    oDiv[2].onclick = function(){alert(this.id);};
    document.body.onclick = function(){alert("body");};
</script>

阻止事件冒泡：子元素接收到事件以后，阻止子元素再给父元素传播事件。阻止事件的方法标准浏览器和ie浏览器有不同的表示方式

<script>
	//  标准浏览器   ev.stopPropagation();
    //  ie浏览器    ev.cancelBubble = true;
    //  第一种写法
    if(ev.cancelBubble){
        ev.cancelBubble= true;
    }else{
        ev.stopPropagation()
    }
    //  第二种写法
    ev.stopPropagation ? ev.stopPropagation():ev.cancelBubble= true;
</script>

事件默认行为

事件的默认行为，即赋予了元素特殊的操作，如点击链接会跳转到其他的网页，在浏览器中点击鼠标右键会弹出菜单

阻止事件默认行为的方法

<script>
	//  直接在事件处理函数里面加  return false
    元素.事件添加的事件: return false   阻止
    //  绑定事件取消默认
    元素.addEventListner:ev.preventDefault();  
    元素.attachEvent:ev.returnValue = false;
    document.onclick = function(ev){
        var ev = window.event || ev;  //  兼容
        if(ev.preventDefault){ev.preventDefault()},false)
    }
</script>

键盘事件

键盘事件触发时相关属性
    keyCode   键值
    keydown    键盘按下
    keyup    键盘抬起

滚轮事件

滚轮事件标准浏览器、ie、与火狐浏览器有不同的表现形式
添加滚轮事件：
标准、ie：oDiv.onmousewheel = fun;
火狐：oDiv.addEventListener("DOMMouseScroll",fun,false);

<script>
//  获取滚轮滚动信息：
//  标准、ie：ev.wheelDelta;
//  火狐：ev.detail;
    function fun(ev){
        var ev = window.event || ev; 
        console.log(ev.wheelDelta);
        console.log(ev.detail);
    }
</script>

事件委托

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

例如：页面上有一个节点树：div>ul>li>a；给最里面的a加一个点击事件，这个事件就会一层一层的往外执行，执行顺序a>li>ul>div