js 事件（一）

事件

事件三要素：事件源、事件类型、事件处理函数
事件对象：在本次事件过程中，记录事件发生的所有信息
通过事件对象，获取事件源 e.target

事件的绑定方式

赋值式绑定（DOM0级事件绑定）
obox.onclick = function(){
//
}
监听式绑定（DOM2级事件绑定）

//封装兼容写法
//添加
function addEvent(ele,type,cb){
        if(ele.addEventListener){
            ele.addEventListener(type,cb)
        }else if(ele.attachEvent){
            ele.attachEvent("on"+type,cb)
        }else{
            ele["on"+type] = cb;
        }
    }
    //移除
    function removeEvent(ele,type,cb){
        if(ele.removeEventListener){
            ele.removeEventListener(type,cb)
        }else if(ele.detachEvent){
            ele.detachEvent("on"+type,cb)
        }else{
            ele["on"+type] = null;
        }
    }

阻止默认事件

//函数封装
function stopDefault(e){
        if(e.preventDefault){
            e.preventDefault()
        }else{
            e.returnValue = false;
        }
    }

事件对象兼容写法

var e = eve || window.event;
var code = e.keyCode || e.which;
var target  = e.target || e.srcElement;

事件对象身上的属性

//鼠标相对于事件源的坐标
console.log(e.offsetX)
console.log(e.offsetY)

//鼠标相对于页面的可视区域的坐标
console.log(e.clientX)
console.log(e.clientY)

//鼠标相对于页面的坐标
console.log(e.pageX)
console.log(e.pageY)

//鼠标相对于屏幕的坐标
console.log(e.screenX)
console.log(e.screenY)

事件流

事件执行顺序我们叫他事件流。
分为三个阶段：
冒泡阶段：从里向外
目标（当前事件）阶段
捕获阶段：从外向内
事件冒泡:当触发某个元素的某个事件时，它会先触发自己的对应事件，然后，依次向上触发所有父级的相同事件,如果中间有父级没有相同事件，继续向上触发.