HTML DOM 使 <code>JavaScript</code> 有能力對 HTML 事件做出反應(yīng)深啤。如下的代碼：
<h1 onclick="this.innerHTML='變成神!'">點(diǎn)擊文本!</h1>
點(diǎn)擊文本错维，文字會變成“變成神壁榕！”
對事件做出反應(yīng)
我們可以在事件發(fā)生時執(zhí)行 <code>JavaScript</code>皇耗，比如當(dāng)用戶在 HTML 元素上點(diǎn)擊時。
如需在用戶點(diǎn)擊某個元素時執(zhí)行代碼赞哗，請向一個 HTML 事件屬性添加 <code>JavaScript</code> 代碼：
onclick='JavaScript';
HTML 事件的例子：
- 當(dāng)用戶點(diǎn)擊鼠標(biāo)時 <code>onmousedown雷则、onmouseup 以及 onclick</code> 事件
<code>onmousedown, onmouseup</code> 以及 onclick 構(gòu)成了鼠標(biāo)點(diǎn)擊事件的所有部分。首先當(dāng)點(diǎn)擊鼠標(biāo)按鈕時肪笋，會觸發(fā) onmousedown 事件月劈，當(dāng)釋放鼠標(biāo)按鈕時度迂，會觸發(fā) onmouseup 事件，最后猜揪，當(dāng)完成鼠標(biāo)點(diǎn)擊時惭墓，會觸發(fā) onclick 事件。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script>
function on(){alert(1);}
function down(){alert(2);}
function up(){alert(3);}
</script>
</head>
<body>
<p onmouseup="up()" >dianji</p>
<p onmousedown="down()">dianji</p>
<p onclick="on()">dianji</p>
</body>
</html> - 當(dāng)網(wǎng)頁或圖像已加載時 <code>onload</code> 與關(guān)閉頁面時 <code>onunload</code>事件
<body onload="alert(1);" onunload="alert(2);"></body> - 當(dāng)鼠標(biāo)移動或移除到元素上時 onmouseover 和 onmouseout 事件
<p onmouseover="this.innerHTML='鼠標(biāo)移上來了'" onmouseout="this.innerHTML='鼠標(biāo)移走了'"></p> - 當(dāng)輸入字段被改變時 onchange事件
<input type="text" onchange="this.value='變了變了' " /> - 當(dāng)提交 HTML 表單時以及各種input事件
onfocus獲取輸入焦點(diǎn)時觸發(fā)的事件而姐，<code>select()</code>輸入框內(nèi)容的選中
<input type="text" onfocus="this.value='獲取了焦點(diǎn)' " />
<input type="text" onfocus="select(this.value);" /> - 當(dāng)用戶觸發(fā)按鍵時诅妹，不具體展開有興趣自行百度
addEventListener() 方法
-
在用戶點(diǎn)擊按鈕時觸發(fā)監(jiān)聽事件：
<code>document.getElementById("myBtn").addEventListener("click", displayDate);</code>
由于沒有找到太好的例子，所以我簡單介紹下用法毅人，實際使用情況再自行分析。
主要用于監(jiān)聽點(diǎn)擊事件尖殃，而且可以并發(fā)事件丈莺。
<code>ddEventListener()</code> 方法添加的事件句柄不會覆蓋已存在的事件。
你可以向一個元素添加多個事件送丰。
你可以向同個元素添加多個同類型的事件句柄缔俄，如：兩個 "click" 事件。
你可以向任何 DOM 對象添加事件監(jiān)聽器躏，不僅僅是 HTML 元素俐载。如： window 對象。
<code>addEventListener()</code> 方法可以更簡單的控制事件（冒泡與捕獲）登失。
當(dāng)你使用 <code>addEventListener()</code> 方法時, <code>JavaScript</code> 從 HTML 標(biāo)記中分離開來遏佣，可讀性更強(qiáng)， 在沒有控制HTML標(biāo)記時也可以添加事件監(jiān)聽揽浙。
你可以使用 <code>removeEventListener()</code> 方法來移除事件的監(jiān)聽状婶。
不能寫onclick，只能用<code>click</code>馅巷。
語法element.addEventListener(event, function, useCapture);
第一個參數(shù)是事件的類型 (如 "click" 或 "mousedown").
第二個參數(shù)是事件觸發(fā)后調(diào)用的函數(shù)膛虫。
第三個參數(shù)是個布爾值用于描述事件是冒泡還是捕獲。該參數(shù)是可選的钓猬。
栗子
當(dāng)用戶點(diǎn)擊元素時彈出 "Hello World!" :
element.addEventListener("click", function(){ alert("Hello World!"); });
也可以獲取id來添加：
document.getElementById("myBtn").addEventListener("click", myFunction);
function myFunction() {
alert ("Hello World!");
}
也可以添加多個稍刀，或者不同類型都可以：
document.getElementById("myBtn").addEventListener("mouseout", myFunction);
document.getElementById("myBtn").addEventListener("click", myFunction);
document.getElementById("myBtn").addEventListener("click", myFunction);
向 Window 對象添加事件句柄
addEventListener() 方法允許你在 HTML DOM 對象添加事件監(jiān)聽， HTML DOM 對象如： HTML 元素, HTML 文檔, window 對象敞曹≌嗽拢或者其他支出的事件對象如: xmlHttpRequest 對象。
實例
當(dāng)用戶重置窗口大小時添加事件監(jiān)聽：
window.addEventListener("resize", function(){ document.getElementById("demo").innerHTML = sometext;});傳遞參數(shù)
當(dāng)傳遞參數(shù)值時异雁，使用"匿名函數(shù)"調(diào)用帶參數(shù)的函數(shù)：
實例
element.addEventListener("click", function(){ myFunction(p1, p2); });事件冒泡或事件捕獲
事件傳遞有兩種方式：冒泡與捕獲捶障。
事件傳遞定義了元素事件觸發(fā)的順序鸠珠。 如果你將 <p> 元素插入到 <code><div></code> 元素中鬼吵，用戶點(diǎn)擊 <code><p></code> 元素, 哪個元素的 <code>"click"</code> 事件先被觸發(fā)呢？
在 *冒泡 *中李剖，內(nèi)部元素的事件會先被觸發(fā)，然后再觸發(fā)外部元素锭部，即： <code><p></code> 元素的點(diǎn)擊事件先觸發(fā)暂论，然后會觸發(fā) <code><div></code> 元素的點(diǎn)擊事件。
在 *捕獲 *中拌禾，外部元素的事件會先被觸發(fā)取胎，然后才會觸發(fā)內(nèi)部元素的事件，即： <code><div></code> 元素的點(diǎn)擊事件先觸發(fā) 湃窍，然后再觸發(fā) <code><p></code> 元素的點(diǎn)擊事件闻蛀。
<code>addEventListener()</code> 方法可以指定 <code>"useCapture"</code> 參數(shù)來設(shè)置傳遞類型：
addEventListener(event, function, useCapture);
默認(rèn)值為<code> false</code>, 即冒泡傳遞，當(dāng)值為 <code>true</code> 時, 事件使用捕獲傳遞您市。
實例
document.getElementById("myDiv").addEventListener("click", myFunction, true);
<code>removeEventListener()</code> 方法
<code>removeEventListener()</code> 方法移除由 <code>addEventListener()</code> 方法添加的事件句柄:
實例
element.removeEventListener("mousemove", myFunction);
