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

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

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

什么是事件對(duì)象?

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

鼠標(biāo)事件對(duì)象

鍵盤事件對(duì)象

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

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

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

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

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

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

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

下面我們通過(guò)代碼來(lái)體驗(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>事件對(duì)象常用方法|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)前事件是否會(huì)冒泡
            console.log(e.bubbles);
            //事件目前所處的節(jié)點(diǎn)
            console.log(e.eventPhase);
            //事件類型
            console.log(e.type);
            //事件發(fā)生的時(shí)間戳
            console.log(e.timeStamp);
            //鼠標(biāo)的的X軸和Y軸值
            console.log("X:" + e.clientX, "Y:" + e.clientY);
        }
    </script>
</html>

事件對(duì)象常用屬性