8.2-8.7周报

8.2

• 获取窗口属性
  ——window.pageXoffset/window.pageYoffset 查看滚动条滚动距离
  ——windoow.innerWidth/window.innerHeight 查看可视窗口的尺寸（IE8及以下不兼容）
  ——网页可见区域宽： document.body.clientWidth
  ——网页可见区域高： document.body.clientHeight
  ——div.getBoundingClientRect查看元素尺寸（返回一个对象，里面有元素的left，top等属性）
  ——div.offsetWidth/offsetHeight 返回元素的宽高
• 查看元素位置
  ——div.offsetLeft/offsettop对于无定位的父级元素返回相对于文档的坐标，由于有定位的父级返回最近的有定位的父级的坐标）
  ——dom.offsetParent 返回最近的有定位的父级，如果没有返回body.offsetparent，即null
  —— dom.getElementPosition求元素相对于文档的坐标

// 封装计算窗口尺寸
function getScrollset() {
    if (window.pageXOffset) {
        return {
            x: window.pageXOffset,
            y: window.pageYOffset
        }
    } else {
        return {
            x: document.body.scrollLeft + document.documentElement.scrollLeft,
            y: document.body.scrollTop + document.documentElement.scrollTop
        }
    }
}

// 封装是视口尺寸方法
function getViewportOffset() {
    if (window.innerWidth) {
        return {
            width: window.innerWidth,
            height: window.innerHeight
        }
    } else {
        if (document.compatMode === "BackCompat") {//判断是不是怪异模式（向后兼容）
            return {
                width: document.body.clientLeft,
                height: document.body.clientHeight
            }
        } else {
            return {
                width: document.documentElement.clientLeft,
                height: document.documentElement.clientHeight

            }
        }
    }
}

8.3

• 滚动条滚动的三个方法（都是window上的方法）
  ——scroll() scrollTo() scrollBy()
  （三个方法类似，用法都是将x，y坐标传入。即实现滚轮效果）
  区别在于scrollBy()会在之前的数据上做累加scroll() scrollTo()的用法基本相同
• eg.利用scrollBy()做出自动阅读的功能

    <div style="width: 100px;height: 100px;background-color: rgb(43, 219, 196);color: #fff;font-size: 40px;text-align: center;line-height: 100px;
position: fixed;bottom: 200px;right: 50px;border-radius: 50%;opacity: 0.5;">start</div>
    <div style="width: 100px;height: 100px;background-color: rgb(231, 110, 221);color: #fff;font-size: 40px;text-align: center;line-height: 100px;
position: fixed;bottom: 50px;right: 50px;border-radius: 50%;opacity: 0.5;">stop</div>
    <script>
        var start = document.getElementsByTagName("div")[0];
        var stopp = document.getElementsByTagName("div")[1];
        var timer;
        var key = true;
        start.onclick = function () {
            if (key){
                timer = setInterval(function () {
                    window.scrollBy(0, 10);
                }, 100)
                key = false;
            }

        }
        stopp.onclick = function () {
            clearInterval(timer);
            key = true;
        }
    </script>

8.4

脚本化css

• dom.style.width/height/backgroundColor(css没有“-”，书写方式改为小驼峰式）只能查询行间样式
  注：用dom.style.cssFloat代替div.style.float
• window.getComputerStyle(element,null).width查询的是真实值
• dom.currentStyle IE8及以下使用

// 查看元素样式
var div = document.getElementsByTagName('div')[0];

function getStyle(leem, prop) {
    if (window.getComputedStyle) {
        return window.getComputedStyle(elem, null)[prop];
    } else {
        return elem.currentStyle[prop];
    }
}

事件的绑定

• dom.onclick = function(){ } 一个dom变量只能绑定一个事件(this指向本身)
• `dom.addEventlistener(事件类型，处理函数，flase)
• achEvent（'on'+type,function(）{}) this指向window

// 绑定事件
function addEvent(elem, type, handle) {
    if (elem.addEventListener) {
        elem.addEventListener(type, handle, false);
    } else if (elem.attachEvent) {
        elem.attachEvent('on' + type, function () {
            handle.call(elem);
        })
    } else {
        elem['on' + type] = handle;
    }
}

解除事件绑定

• dom.onclick = null/false/" "
• dom.removeEvent(type,处理函数，false)
• dom.detachEvent('on'+type,处理函数)

8.5

事件处理模型

• 事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。
• 事件捕获：事件从最不精确的对象(document 对象)开始触发，然后到最精确(也可以在窗口级别捕获事件，不过必须由开发人员特别指定)
• 

//触发顺序先捕获后冒泡
        var wrapper = document.getElementsByClassName('wrapper')[0];
        var content = document.getElementsByClassName('content')[0];
        var box = document.getElementsByClassName('box')[0];

        wrapper.addEventListener('click', function () {
            console.log('wrapperBubble');
        }, false);
        content.addEventListener('click', function () {
            console.log('contentBubble');
        }, false);
        box.addEventListener('click', function () {
            console.log('boxBubble');
        }, false);

        wrapper.addEventListener('click', function () {
            console.log('wrapper');
        }, true);//false变成true触发捕获事件
        content.addEventListener('click', function () {
            console.log('content');
        }, true);
        box.addEventListener('click', function () {
            console.log('box');
        }, true);

• 事件委托：把原本需要绑定在子元素的响应事件（click、keydown…）委托给父元素，让父元素担当事件监听的职务。事件委托的原理是DOM元素的事件冒泡。

        // 事件委托(点li打印它的内容)
        var ul = document.getElementsByTagName("ul")[0];
        ul.onclick = function(e){
            var event = e || window.event;
            var target = event.target || event.srcElement;
            console.log(target.innerText);
        }

8.6

取消冒泡事件

• event.stopPropagation();不支持IE9以下
• event.cancelBubble = true;IE独有

// 取消冒泡函数封装
function stopBubble(event) {
    if (event.stopPropagation) {
        event.stopPropagation();
    } else {
        event.cancleBubble = true;
    }
}

阻止默认事件

• 在函数最后加上return false（以对象为属性的方式注册的事件才有用）
• W3c标准：event.preventDefault();
• IE：eleent.returnValue = false

 // 阻止默认事件发生
 function cancelHandler(event){
    if(event.preventDefault){
        event.preventDefault();
    }else{
        event.returnValue = false;
    }
}

事件对象

• event/window.event

事件源对象

• event.target火狐只有这个
• event.srcElement IE只用这个
• 谷歌都有

8.7

事件分类（鼠标事件）

• eg.鼠标拖拽

    <script type="text/javascript">


        var div = document.getElementsByTagName("div")[0];
        darg(div);
        // 鼠标拖拽
        function darg(obj) {
            obj.onmousedown = function (e) {

                //IE直接用event或者window.event得到事件本身,而在其他浏览器函数要获取到事件本身需要从函数中传入
                var event = e || window.event;
                var disX = event.clientX - this.offsetLeft;
                var disY = event.clientY - this.offsetTop;

                //鼠标移动
                document.onmousemove = function (e) {
                    var event = e || window.event;
                    obj.style.left = event.clientX - disX + 'px';
                    obj.style.top = event.clientY - disY + 'px';
                };
                //鼠标放开
                document.onmouseup = function () {
                    document.onmousemove = null;
                    document.onmouseup = null;
                }
            }
        }




    </script>

• 区别左右键

    <script type="text/javascript">
        document.onmousedown = function(e){
            if(e.button == 2){
                console.log('right');
            }else if(e.button == 0){
                console.log('left');
            }else{
                console.log('scroll');
            }
        }

    </script>