[想試試看JavaScript ] 事件物件

13th鐵人賽

夯特

2021-09-21 13:04:48

562 瀏覽

分享至

事件物件

事件物件很常跟事件處理一起配著使用
瀏覽器會主動收集和事件有關係的資訊，並製造出 Event Object 事件物件。
瀏覽器會把我們做的事情紀錄在事件物件裡面，並且用參數的形式傳進事件處理器裡面。
我們只要使用事件物件，這樣我們就可以知道我們在網頁上做了什麼事情囉

語法

語法:

var handler=function(事件物件){
    
}

handler 代表事件處理函式

範例

那麼來做個範例練習一下
這個範例就是，用滑鼠在瀏覽器上點擊一個按鈕，就會告訴我們滑鼠的座標

首先，先做個按鈕，給按鈕一個 id 叫做 btn 好了

<body>
<button id="btn">Btn</button>
</body>

接著，讓網頁一載入就可以執行，我使用 load 事件來執行函式
在 body 標籤上面註冊 load 事件，body 標籤裡面的內容載入完畢就執行函式 init 裡面的內容。

<script>
function init(){

};
</script>
<body onload="init();">
<button id="btn">Btn</button>
</body>

使用 HTML DOM，定義一個變數 btn ，抓取 button 的節點
並在上面註冊 click 事件

<script>
function init(){
var btn=document.getElementById("btn")
btn.addEventListener('click',handler);
};
</script>
<body onload="init();">
<button id="btn">Btn</button>
</body>

我希望點了按鈕後可以得到按鈕的座標位置。
我可以使用 event.clintX、event.clientY

<script>
function init(){
    var btn=document.getElementById("btn");
    var handler=function(event){   // 變數 event 代表事件物件
        alert(event.clientX+","+event.clientY);
    }
    btn.addEventListener('click',handler);
}
</script>
<body onload="init()">
<button id="btn">Btn</button>
</body>