js小知识4

一、BOM

浏览器对象模型
window.location     包含地址信息
        .pathname
        .host
        .port

    window.open();      打开新窗口
    window.close();     关闭窗口

二、获取元素的各种信息

获取元素盒子模型
    oEle.offsetWidth
    oEle.offsetHeight

获取元素相对位置
    oEle.offsetLeft
    oEle.offsetTop

获取元素绝对位置
    function getPos(obj){
        var l = 0,
            t = 0;
        while(obj){
            l+=obj.offsetLeft;
            t+=obj.offsetTop;
            obj = obj.offsetParent;
        }
        return {left: l, top: t};
    }

获取可视区宽高
    document.documentElement.clientWidth
    document.documentElement.clientHeight

获取滚动距离
    document.documentElement.scrollTop||document.body.scrollTop
    document.documentElement.scrollLeft||document.body.scrollLeft

新事件
    window.onresize         可视区大小改变触发
    window.onscroll         滚动距离改变触发

可视区宽高
    document.documentElement.clientWidth    可视区宽
    document.documentElement.clientHeight   可视区高

滚动距离
    scrollTop   垂直方向
        document.documentElement.scrollTop||document.body.scrollTop
    scrollLeft  水平方向
        document.documentElement.scrollLeft||document.body.scrollLeft

三、瀑布流

oEle.getElementsByTagName
oEle.getElementsByClassName
oEle.children;
    注意：获取出来的都是伪数组，不能使用数组的方法

获取高度
    获取盒子模型高度
    oEle.offsetHeight
    获取内容高度
    oEle.scrollHeight
        当内容小于高度，获取的是height+padding，如果内容超过高度，获取的是内容高度

四、事件、事件对象

事件
    onclick         点击事件
    onmouseover     鼠标移入
    onmouseout      鼠标移出
    onscroll        滚动距离改变
    onresize        改变可视区大小
    onload          加载完执行
    onmousemove     鼠标移动触发
    oncontextmenu   上下文菜单
---------------------------------------------------
    事件对象    包含了事件的详细信息

    ev(参数)      不兼容IE6、7、8
    event           不兼容Firefox
    var oEvent = ev||event;

    获取鼠标在可视区中的坐标
        oEvent.clientX
        oEvent.clientY
----------------------------------------------------
    键盘事件    
        onkeydown       键盘按下
        onkeyup         键盘抬起

    获取键码
        oEvent.keyCode

        a   65
        0   48
        1   49
        ←   37
        ↑   38
        →   39
        ↓   40

    浏览器默认行为
    需求：
        阻止浏览器默认行为
        事件中：
            return false;
事件冒泡
        子级的事件，会触发父级相同的事件
    取消冒泡
        oEvent.cancelBubble = true;

五、拖拽

鼠标按下
    onmousedown
                    获取鼠标在元素中的位置
                    disX = clientX-offsetLeft
                    disY = clientY-offsetTop
    鼠标移动
    onmousemove
                    clientX-disX
                    clientY-disY
    鼠标抬起
    onmouseup
                    onmousemove = null;
                    onmouseup = null;

    会选中文字
        return false阻止默认行为
        ie低版本失效
        解决:
            设置捕获
            oEle.setCapture&&oEle.setCapture();
            释放捕获
            oEle.releaseCapture&&releaseCapture();