首頁技術(shù)文章正文

什么是JS事件對象？常用屬性及方法有哪些？

更新時間:2021年10月29日10時55分來源:傳智教育瀏覽次數(shù):

什么是事件對象?

事件發(fā)生以后，系統(tǒng)會調(diào)用我們寫好的事件處理程序，在調(diào)用處理程序時，將事件發(fā)生時有關(guān)事件的一切信息，封裝成一個對象，作為參數(shù)傳給監(jiān)聽函數(shù)(事件處理程序)，我們把這個對象稱為“事件對象”。有關(guān)事件發(fā)生的一切信息，都包含在這個事件對象中;根據(jù)事件類型的不同，事件對象中包含的信息也有所不同; 如點(diǎn)擊事件中，包含鼠標(biāo)點(diǎn)擊的橫縱坐標(biāo)位置，鍵盤事件中，包含鍵盤的鍵值等。

鼠標(biāo)事件對象

鍵盤事件對象

事件對象中的常用屬性及方法有哪些?

event.bubbles：屬性返回一個布爾值，表示當(dāng)前事件是否會冒泡;

event.eventPhase：返回一個整數(shù)值，表示事件流在傳播階段的位置。(0表示事件目前沒有發(fā)生。 1表示事件目前處于捕獲階段。 2表示事件到達(dá)目標(biāo)節(jié)點(diǎn)。 3表示事件處于冒泡階段。)

event.type：返回一個字符串，表示事件類型，大小寫敏感;

event.timeStamp：返回一個毫秒時間戳，表示事件發(fā)生的時間;

event.clientX：獲取鼠標(biāo)事件觸發(fā)的X軸坐標(biāo)

event.clientY：獲取鼠標(biāo)事件觸發(fā)的Y軸坐標(biāo)

下面我們通過代碼來體驗(yàn)上述方法的用法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件對象常用方法|http://web.itheima.com</title>
</head>
<body>
    <input type="button" value="按鈕" id="btn">
</body>
    <script>
        var btn = document.getElementById('btn');
        btn.onclick = function(e){
            //當(dāng)前事件是否會冒泡
            console.log(e.bubbles);
            //事件目前所處的節(jié)點(diǎn)
            console.log(e.eventPhase);
            //事件類型
            console.log(e.type);
            //事件發(fā)生的時間戳
            console.log(e.timeStamp);
            //鼠標(biāo)的的X軸和Y軸值
            console.log("X:" + e.clientX, "Y:" + e.clientY);
        }
    </script>
</html>

事件對象常用屬性