1. 程式人生 > >【js學習】addEventListener() 用法

【js學習】addEventListener() 用法

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

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

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

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

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

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

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

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

語法

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

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

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

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<link rel="stylesheet" href="">
</head>
<body>
 <p>該例項使用addEventListener()方法在按鈕中新增事件</p>
 <button id="mybtn">點我</button>
 <p id="demo"></p>
<script type="text/javascript">
document.getElementById("mybtn").addEventListener("click",displayDate);
function displayDate()
{
	document.getElementById("demo").innerHTML=Date();
}	
</script>	
</body>
</html>




   點選後p標籤中會出現顯示事件。