首頁技術文章正文

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

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

什么是事件對象?

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

鼠標事件對象

鍵盤事件對象

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

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

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

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

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

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

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

下面我們通過代碼來體驗上述方法的用法

<!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){
            //當前事件是否會冒泡
            console.log(e.bubbles);
            //事件目前所處的節(jié)點
            console.log(e.eventPhase);
            //事件類型
            console.log(e.type);
            //事件發(fā)生的時間戳
            console.log(e.timeStamp);
            //鼠標的的X軸和Y軸值
            console.log("X:" + e.clientX, "Y:" + e.clientY);
        }
    </script>
</html>

事件對象常用屬性