網頁

▼

2019/4/28

JavaScript 如何使用addEventListener() 監聽HTML元素的事件

JavaScript可使用HTML DOM的addEventListener()監聽HTML元素的事件(event)，例如滑鼠點擊(click)，輸入文字(keydown)，畫面捲動(scroll)等。新增監聽器的方法如下：

target.addEventListener(type, function (event) {
    // do something...
});

target為取得的HTML元素。type為監聽的事件類型，後面的函式為當事件發生時要執行的函式。


例如監聽<input/>的keydown事件。

<html>
<head>
</head>
<body>
    <input id="input1"/>
</body>
<script>
window.onload = function() {
    var input1 = document.getElementById("input1");
    
    input1.addEventListener("keydown", function (event) {
        alert(this.value);
    });
};
</script>
</html>

上面在<input/>中以鍵盤輸入文字時，function會被觸發並在alert彈出視窗顯示欄位的value值。


參考：

沒有留言:

張貼留言