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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容