js小知识7

憧憬.jpg

回首昨天，我们问心无愧，尽管太多的苦涩融进了昨日的犁铧，尽管太多的忧伤充斥着我们的心灵，尽管太多的无奈写在我们的脸上，尽管太多的精力挥洒在昨日的流程上。

一、事件对象

var oEvent = ev||event;
鼠标在可视区中的坐标
oEvent.clientX
oEvent.clientY
取消冒泡
oEvent.cancelBubble = true;
键码
oEvent.keyCode 

二、事件冒泡

子级触发事件，会触发父级的事件，一级一级往上找。

三、获取距离

（1）获取可视区宽高
    document.documentElement.clientWidth
    document.documentElement.clientHeight
（2）获取滚动距离
    document.documentElement.scrollTop||document.body.scrollTop
    document.documentElement.scrollLeft||document.body.scrollLeft
（3）获取内容宽高
    oEle.scrollHeight
    oEle.scrollWidth
（4）获取盒子模型宽高
    oEle.offsetHeight
    oEle.offsetWidth
（5）获取元素的相对位置
    oEle.offsetLeft
    oEle.offsetTop
（6）获取元素的绝对位置
    function getPos(obj){
        var l = 0,
            t = 0;
        while(obj){
            l+=obj.offsetLeft;
            t+=obj.offsetTop
            obj = obj.offsetParent;
        }
        return {"left":l,"top":t};
    }

四、事件

（1）事件绑定(事件监听)
    解决事件冲突问题
    给同一个元素加同一个事件，加多次
    oEle.addEventListener(sEv, fn, false);
    只兼容高级浏览器
    oEle.attachEvent('on'+sEv, fn);
    兼容IE
（2）解除绑定
    oEle.removeEventListener(sEv, fn, false);   
    oEle.detachEvent('on'+sEv, fn);
    不能解绑匿名函数

五、事件委托(事件委派)

    （a）作用：
        1.提高性能
        2.给未来元素添加事件
    （b）获取事件源
        var oSrc = oEvent.srcElement||oEvent.target