- DOM入門
- DOM就是Html頁面的模型，將每個標籤都做爲一個對象，JavaScript通過調用DOM中的屬性、方法就可以對網頁中的文本框、層等元素進行編程控制。比如通過操作文本框的DOM對象，就可以讀取文本框中的值、設置文本框中的值。 JavaScript→DOM就是C#→ADO.NET。DOM就是一些讓JavaScript能操作Html頁面控件的類、函數。
- DOM也像WinForm一樣，通過事件、屬性、方法進行編程。
- CSS+JavaScript+DOM=DHtml
- DOM模型
![]()
- 事件
- 在DOM中有很多事件。演示：
- <body οnmοusedοwn=“alert(‘別點我！’);”>//注意body的範圍。Body的範圍就是body裏內容的範圍，如果沒有內容，就無法觸發事件。
- 有時事件的響應代碼比較多，就要放到一個函數中：
<script type="text/javascript">
function userMouseDown() {
alert('網頁被你點壞了>_<~~,賠吧！');
alert('逗你玩呢~~');
}
</script>
<input type="button" value="按鈕" οnmοusedοwn=“userMouseDown();" />
注：οnmοusedοwn=“userMouseDown();”中，userMouseDown後的括號不能丟（不能寫成οnmοusedοwn=“userMouseDown” ），帶()表示調用函數，直接寫函數名錶示設置事件的處理函數爲userMouseDown。可以這樣說吧,onclick後會觸發一個方法,
οnclick=f1;的意思就是說onclick觸發的方法就是f1.
οnclick=“f1()”的意思就是說onclick觸發的方法裏調用了f1
οnclick=事件引發後的處理程序。
οnclick=" f(this); "; //在onclick的事件處理程序中調用了f()方法
οnclick=f;//該事件的處理程序就是f()方法。
- 動態設置事件
- JavaScript也可以像.Net中那樣動態設置事件，Button.Click+=…
<script type="text/javascript">
function F1() { alert('In F1'); }
function F2() { alert('In F2'); }
</script>
<input type="button" value="關聯F1" οnclick="document.οnclick=F1;" />
<input type="button" value="關聯F2" οnclick="document.οnclick=F2;" />
- 注意： οnclick=“document.οnclick=F1;” 此處的F1不要加括號，加括號就編程了調用F1()函數，並且把返回值賦值給document.onclick了。
document.body.onclick範圍僅限於body
document.onclick範圍爲整個文檔。
- 事件冒泡
- 事件冒泡：如果元素A嵌套在元素B中，那麼A被點擊不僅A的onclick事件會被觸發，B的onclick也會被觸發。觸發的順序是“由內而外” 。驗證：在頁面上添加一個table、table裏有tr、tr裏有td，td裏放一個p，在p、td、tr、table中添加onclick事件響應，例：
<table οnclick="alert('table onclick');">
<tr οnclick="alert('tr onclick');">
<td οnclick="alert('td onclick');"><p οnclick="alert('p onclick');">aaaa</p></td>
<td>bbb</td>
</tr>
</table>
- 取消事件冒泡： window.event.cancelBubble = true;//IE下的寫法。
<table οnclick="alert('table onclick');">
<tr οnclick=" window.event.cancelBubble = true;alert('tr onclick');">
<td οnclick="alert('td onclick');">
<p οnclick=" window.event.cancelBubble = true;alert('p onclick');"> aaaa</p>
</td>
<td>
bbb
</td>
</tr>
</table>
- window.onload與body的onload
1.二者效果完全一樣,都是在頁面內容都加載完畢後才觸發。
2.由於網頁中沒有window所以在body中寫onload
3.建議使用window.onload//使用js腳本的方式高效
4.其實應該是document.onload，但是所有瀏覽器都實現到了window對象上。
- 事件中的this
- 事件中的this。除了可以使用event.srcElement在事件響應函數中，this表示發生事件的控件。只有在事件響應函數才能使用this獲得發生事件的控件，在事件響應函數調用的函數中不能使用（這裏的this表示window對象），如果要使用則要將this傳遞給函數或者使用event.srcElement，例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function f3() {
alert(event.srcElement.value);
}
function f4() {
//事件的調用函數中this 代表window對象
alert(this.location.href);
alert(this.value);
}
window.onload = function () {
btn5.onclick = function () {
alert(event.srcElement.value);
}
btn6.onclick = function () {
//在事件響應函數中 this代表當前觸發事件的對象
alert(this.value);
}
}
</script>
</head>
<body>
<input id="btn1" type="button" value="btn1" οnclick="alert(event.srcElement.value)" /><br />
<input id="btn2" type="button" value="btn2" οnclick="alert(this.value)" /><br />
<input id="btn3" type="button" value="btn3" οnclick="f3()" /><br />
<input id="btn4" type="button" value="btn4" οnclick="f4()" /><br />
<!-- 此時this是觸發事件的對象-->
<!--<input id="Button1" type="button" value="btn4" οnclick="f4(this)" />--><br />
<input id="btn5" type="button" value="btn5" /><br />
<input id="btn6" type="button" value="btn6" /><br />
</body>
</html>
- (*)this和event.srcElement的語義是不一樣的，this就是表示當前監聽事件的這個對象，event.srcElement是引發事件的對象：事件冒泡，例：
<!--srcElement 引發事件的對象-->
<table οnclick="alert(event.srcElement.innerHTML);">
<tr οnclick="alert(event.srcElement.innerHTML);">
<td οnclick="alert(event.srcElement.innerHTML);"><p οnclick="alert(event.srcElement.innerHTML);">aaaa</p></td>
<td>bbb</td>
</tr>
</table>
<!--this 監聽事件的這個對象-->
<table οnclick="alert(this.innerHTML);">
<tr οnclick="alert(this.innerHTML);">
<td οnclick="alert(this.innerHTML);"><p οnclick="alert(this.innerHTML);">aaaa</p></td>
<td>bbb</td>
</tr>
</table>
- <body οnclick=“//這個叫做事件調用函數，在這裏寫this表示發生事件的控件。在這裏調用另外一個函數F1,則F1中不能使用this表示發生事件的控件”>