JavaScript中用來監聽事件的方法。這個方法可以讓你向特定的HTML元素（例如: 按鈕、表單、文檔等）添加addEventListener()，當指定的事件發生時，執行相應的 JavaScript 程式碼。
addEventListener()方法可用於監控DIY原生元件。
可從e 原生事件中選取你要監聽的事件元素!
https://www.runoob.com/jsref/met-document-addeventlistener.html
https://www.freecodecamp.org/chinese/news/javascript-addeventlistener-example-code/
addEventListener() 方法概述addEventListener() 它屬於 DOM (Document Object Model) 方法，主要用於在指定元素上綁定事件監聽器。
false，即在冒泡階段處理事件。addEventListener() 解釋target.addEventListener(event, function, useCapture)我們可能想知道關於事件的更多信息，例如什麼元素被點擊了。在這種情況下，我們需要向函數傳入一個事件參數。
// 獲取元素
var myButton = document.getElementById('myButton');
// 添加點擊事件監聽器
myButton.addEventListener('click', function() {
alert('按鈕被點擊了！');
});上面的程式碼中，當擁有 ID 為 ‘myButton’ 的按鈕被點擊時，會彈出一個訊息框。
var myDiv = document.getElementById('myDiv');
// 使用捕獲階段處理點擊事件
myDiv.addEventListener('click', function() {
alert('DIV 元素被點擊了！');
}, true);在這個例子中，事件處於捕獲階段時執行處理函數。
var myInput = document.getElementById('myInput');
// 添加輸入事件監聽器，並獲取事件對象
myInput.addEventListener('input', function(event) {
console.log('輸入的值：', event.target.value);
});在這裡，event 對象包含了有關事件的信息，例如觸發事件的目標元素等。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>addEventListener 示例</title>
</head>
<body>
<button id="myButton">點擊我</button>
<div id="myDiv">DIV 元素</div>
<input type="text" id="myInput" placeholder="輸入文字">
<script src="JS/Eventscript.js">
</script>
</body>
</html> // 的點擊事件監聽器
let myButton = document.getElementById('myButton');
myButton.addEventListener('click', function() {
alert('按鈕被點擊了！');
});
// 捕獲階段處理點擊事件
let myDiv = document.getElementById('myDiv');
myDiv.addEventListener('click', function() {
alert('DIV 元素被點擊了！');
}, true);
// 輸入事件監聽器，並獲取事件對象
let myInput = document.getElementById('myInput');
myInput.addEventListener('input', function(e) {
console.log('輸入的值：', event.target.value);
});<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Event_DOM</title>
</head>
<body>
<h1 class="logo" id="title">Now is 0.</h1>
<input type="button" value="click to +1" class="btn">
<script src="JS/Eventscript.js"></script>
</body>
</html>const title = document.querySelector("h1");
const btn = document.querySelector(".btn");
let counter = 0;
btn.addEventListener("click", function (e) {
counter++;
title.textContent = `Now is ${counter}.`;
});從Google Chrome 按下F12，跳出執行視窗，下方的DOM事件監聽器來觀察。
此時可以點開Script 裡面，觀察你HTML的元素，能看到從哪一個js檔案增加的事件觀察器。
import 與 export 在Node.js 有提到其用法: Node.js require、module以及exports 模組設定 - Hugo Habor 每一個Javascript檔案可當作獨立模組系統(ES Module) 1. Module（模組）…
作者今天遇到一個很奇怪的問題 寫程式寫到一半... 點擊應用程式時... 怎麼都跳不出畫面... 後來查詢了一下是Reg註冊可能被微軟更新給搞掉了... 文章資訊來源: 【以解決】各位.exe檔案打不開，不要相信"在 Windows 7 或 Windows Vista 中無法打開 .EXE 檔案"這篇文章…
Node.js可以提供你很多模組，今天來探索如何使用 Node.js 的 http 模組來架設一個簡單的伺服器。 本篇使用模組require 載入你所需要的模組。這次我們使用'http' 模組來創造一個簡單的server。 資料參考 Node.js - createServer 起手式 - iT…
針對Node.js來談談 require、module以及exports 模組設定。這些概念允許開發者將大型程序分解成小的、可管理的、可重用的部分，稱為模塊。 下面將逐一介紹這些概念，以及它們如何與 JavaScript 關聯。 An Essential Guide to Node.js Modules (javascripttutorial.net) 1. Module（模組）…
像是很多專案必須讀取國家資料中心的metadata，許多檔案格式為CSV、JSON、Html可以利用網頁技術去爬蟲；拿一個範例來嘗試看看就知道這些語法的實際用途。 [主題週]專題報導-開放資料 (Open Data)相關議題與應用 (114230) - Cool3c 在這裡我們使用台北市資料大平台 UBike2.0 作為資料依據! 目的 來抓取空位數量 >15， 抓取空位數量 <15。…