JS——event

触发DOM上的某个事件时，会产生一个事件对象event，这个对象中包含着所有与事件有关的信息：

普通浏览器支持 event（传参），IE678支持 window.event（无参），兼容写法：

<script>

    var divEle = document.getElementsByTagName("div")[0];

    divEle.onclick = function (e) {

        e = e || window.event;

        console.log(e);

    }

</script>

client、page、screen三者之间的区别：

clientX/clientY：当前窗口（可视区域）的左上角为基准点

pageX/pageY：在不拖动情况下同上，在拖动的情况下，会越来越大

screenX/screenY：当前屏幕左上角为基准点

pageX、pageY在IE678中不支持，兼容写法：被卷去的部分+可视区域坐标

<script>

    document.onclick = function (e) {

        e = e || window.event;

        var pageY = e.pageY || scroll().top + e.clientY;

        console.log(pageY);

    }

    function scroll() {

        return {

            "top": window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop,

            "left": window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft

        };

    }

</script>

特别补充：offsetX/offsetY，以触发事件的元素左上角为基准点

<script>

    var divEle = document.getElementsByTagName("div")[0];

    divEle.onclick = function (e) {

        e = e || window.event;

        console.log(e.offsetY);

    }

</script>

巴特西

JS——event

最新文章

热门文章