1. 程式人生 > >JS中event物件中的常見屬性

JS中event物件中的常見屬性

在事件函式中,其實是可以寫引數的,寫法:

<script>
    var btn = document.getElementById("btn");

    btn.onclick = function (event) {
            var e = event || window.event;
            console.log(e.target);
        };

        btn.onmouseover = function (event) {
            var e = event || window.event;//為了相容
            console.log(e.target);
    }
</script>

事件函式裡面有幾個常用的屬性,我們來看一下:

1.screenX\/screenY 是以螢幕為基準進行測量,即:當前元素距離螢幕的尺寸

2.pageX 和 pageY 是以當前文件(絕對定位)為基準,不適用於IE6-8;會計算滾動長度

3.clientX 和 clientY 是以當前可視區域為基準,類似於固定定位。會忽略滾動長度

它們常常和offset家族聯合使用來動態獲取滑鼠相對於盒子的位置(距離盒子邊框的距離):

<script>
    var box = document.getElementById("box");
    box.onmousemove = function (event) {
        var e = event || window.event;

        var x = event.clientX - box.offsetLeft;
        var y = event.clientY - box.offsetTop;
        // console.log(x, y);

        box.innerText = '(x: ' + x +', y:' + y +')';
    }
</script>