網頁

2019/4/28

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

JavaScript可使用HTML DOMaddEventListener()監聽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值。


參考:

沒有留言:

張貼留言