【js學習】addEventListener() 用法
阿新 • • 發佈:2019-01-21
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標籤中會出現顯示事件。