day15

1-列举几个常见的浏览器兼容问题

节点兼容问题

//滚动距离

function getScrollOffset() {

    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 {

            w: window.innerWidth,

            h: window.innerHeight

        }

    } else {

        if (document.compatMode == "BackCompt") {

            return {

                w: document.body.clientWidth,

                y: document.body.clientHeight

            }

        } else {

            return {

                w: document.documentElement.clientWidth,

                h: document.documentElement.clientHeight

            }

        }

    }

}

//获取属性 解决兼容问题

function getStyle(ele, prop) {

    // if (window.getComputedStyle) {

    //     return window.getComputedStyle(ele, null)[prop]

    // } else {

    //     return ele.currentStyle[prop]

    // }

    return window.getComputedStyle ? window.getComputedStyle(ele, null)[prop] : ele.currentStyle[prop]

}

//事件绑定 解决兼容问题

function addEvent(ele, type, handle) {

    if (ele.addEventListener) {

        ele.addEventListener(type, handle, false)

    } else if (ele.attachEvent) {

        //attachEvent中this指向 指向window

        ele.attachEvent(type, function() {

            //怕this指向问题 通过call改变一下

            handle.call(ele)

        })

    } else {

        ele["on" + type] = handle

    }

}

//解绑问题

function removeEvent(ele, type, fn) {

    if (ele.removeEventListener) {

        ele.removeEventListener(type, fn)

    } else if (ele.detachEvent) {

        ele.detachEvent("on" + type, function() {

            fn.bind(this, ele)

        })

    } else {

        ele["on" + type] = null

    }

}

2-js 中给元素注册事件的方法有哪些？

通过原始绑定 on+事件名

通过addEventlistener

通过attachEvent

3-js 中给元素的移除事件的方法

removeEventListener()

detachEvent()

on+事件名=null

4-阻止冒泡的方法

event.stopProgatation()

event.cancelBubble()

5-阻止默认行为的方法

event.preventDefault()