基礎整理---dom
使用閉包儲存狀態
for (var i = 0; i < elems.length; i++) {
(function (lockedInIndex) {
elems[i].addEventListener('click', function (e) {
e.preventDefault();
alert('I am link #' + lockedInIndex);
}, 'false');
})(i);
}
改變 HTML 輸出流
document.write(Date());改變 HTML 內容
document.getElementById(id).innerHTML=新的 HTML改變 HTML 屬性
document.getElementById(id).attribute=新屬性值
document.getElementById("image").src="landscape.jpg";改變 HTML 樣式
document.getElementById(id).style.property=新樣式
document.getElementById("p2").style 使用事件
<button type="button"
onclick="document.getElementById('id1').style.color='red'">
點我!</button><p id="p1">這是一個文字。 這是一個文字。 這是一個文字。 這是一個文字。 這是一個文字。 這是一個文字。 這是一個文字。</p>
<input type 
點選
<h1 onclick="this.innerHTML='Ooops!'">點選文字!</h1><h1 onclick="changetext(this)">點選文字!</h1>
<script>
function changetext(id)
{
id.innerHTML="Ooops!";
}
</script><button onclick="displayDate()">點這裡</button>使用 HTML DOM 來分配事件
document.getElementById("myBtn").onclick=function(){displayDate()};onload 和 onunload 事件
onload 和 onunload 事件會在使用者進入或離開頁面時被觸發。
onload 事件可用於檢測訪問者的瀏覽器型別和瀏覽器版本，並基於這些資訊來載入網頁的正確版本。
onload 和 onunload 事件可用於處理 cookie
<body onload="checkCookies()">
<script>
function checkCookies(){
if (navigator.cookieEnabled==true){
alert("Cookies 可用")
}
else{
alert("Cookies 不可用")
}
}onchange 事件
<input type="text" id="fname" onchange="upperCase()">onmouseover 和 onmouseout 事件
<div onmouseover="mOver(this)" onmouseout="mOut(this)"
style="background-color:#D94A38;width:120px;height:20px;padding:40px;
">Mouse Over Me</div>
<script>
function mOver(obj){
obj.innerHTML="Thank You"
}
function mOut(obj){
obj.innerHTML="Mouse Over Me"
}
</script>onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構成了滑鼠點選事件的所有部分。首先當點選滑鼠按鈕時，會觸發 onmousedown 事件，當釋放滑鼠按鈕時，會觸發 onmouseup 事件，最後，當完成滑鼠點選時，會觸發 onclick 事件。
JavaScript HTML DOM EventListener
addEventListener() 方法
addEventListener() 方法用於向指定元素新增事件控制代碼。
addEventListener() 方法新增的事件控制代碼不會覆蓋已存在的事件控制代碼。
你可以向一個元素新增多個事件控制代碼。
你可以向同個元素新增多個同類型的事件控制代碼，如：兩個 "click" 事件。
你可以向任何 DOM 物件新增事件監聽，不僅僅是 HTML 元素。如： window 物件。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。
當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也可以新增事件監聽。
你可以使用 removeEventListener() 方法來移除事件的監聽。語法
element.addEventListener(event, function, useCapture);
第一個引數是事件的型別 (如 “click” 或 “mousedown”).
第二個引數是事件觸發後呼叫的函式。
第三個引數是個布林值用於描述事件是冒泡還是捕獲。該引數是可選的。
document.getElementById("myBtn").addEventListener("click", displayDate);
function displayDate() {
document.getElementById("demo").innerHTML = Date();
}向同一個元素中新增多個事件控制代碼
element.addEventListener("click", myFunction);
element.addEventListener("click", mySecondFunction);
var x = document.getElementById("myBtn");
x.addEventListener("mouseover", myFunction);
x.addEventListener("click", mySecondFunction);
x.addEventListener("mouseout", myThirdFunction);
function myFunction() {
document.getElementById("demo").innerHTML += "Moused over!<br>"
}
function mySecondFunction() {
document.getElementById("demo").innerHTML += "Clicked!<br>"
}
function myThirdFunction() {
document.getElementById("demo").innerHTML += "Moused out!<br>"
}向 Window 物件新增事件控制代碼
window.addEventListener("resize", function(){
document.getElementById("demo").innerHTML = sometext;
});傳遞引數
document.getElementById("myBtn").addEventListener("click", function() {
myFunction(p1, p2);
});事件冒泡或事件捕獲？
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。 如果你將
元素插入到
元素中，使用者點選元素, 哪個元素的 “click” 事件先被觸發呢？
在 冒泡 中，內部元素的事件會先被觸發，然後再觸發外部元素，即：
元素的點選事件先觸發，然後會觸發
元素的點選事件。在 捕獲 中，外部元素的事件會先被觸發，然後才會觸發內部元素的事件，即：
元素的點選事件先觸發 ，然後再觸發元素的點選事件。
addEventListener() 方法可以指定 “useCapture” 引數來設定傳遞型別
removeEventListener() 方法
document.getElementById("myDIV").addEventListener("mousemove", myFunction);
function myFunction() {
document.getElementById("demo").innerHTML = Math.random();
}
function removeHandler() {
document.getElementById("myDIV").removeEventListener("mousemove", myFunction);
}HTML DOM 事件
http://www.runoob.com/jsref/dom-obj-event.html