1. 程式人生 > >事件監聽與移除方法

事件監聽與移除方法

addEventListener() 方法用於向指定元素新增事件控制代碼。

addEventListener() 方法新增的事件控制代碼不會覆蓋已存在的事件控制代碼。

你可以向一個元素新增多個事件控制代碼。

你可以向同個元素新增多個同類型的事件控制代碼,如:兩個 "click" 事件。

你可以向任何 DOM 物件新增事件監聽,不僅僅是 HTML 元素。如: window 物件。

addEventListener() 方法可以更簡單的控制事件(冒泡與捕獲)。

當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來,可讀性更強, 在沒有控制HTML標記時也可以新增事件監聽。

你可以使用 removeEventListener() 方法來移除事件的監聽。

<p>該例項使用 addEventListener() 方法在按鈕中新增點選事件。 </p>
<button id="myBtn">點我</button>
<p id="demo"></p>
<script>
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

語法

element.addEventListener(event, function, useCapture);

第一個引數是事件的型別 (如 "click" 或 "mousedown").

第二個引數是事件觸發後呼叫的函式。

第三個引數是個布林值用於描述事件是冒泡還是捕獲。該引數是可選的。

Note 注意:不要使用 "on" 字首。 例如,使用 "click" ,而不是使用 "onclick"。