掌握事件對象，了解什麼是事件冒泡？如何阻止事件冒泡？
事件對象
IE 支援全局事件對象(window.event); 但 Firefox 不支援，對于
FireFox，隻在事件發生時産生event對象。
<script type="text/javascript">
function doOnClick(e){
alert(e.clientX + ',' + e.clientY);
var target = e.target || e.srcElement;
alert(target.tagName)
}
</script> … …
… …
<input type="button" value="Click"/>
事件對象的屬性
• clientX，clientY
相當于浏覽器視窗坐标。
• screenX，screenY
相對于螢幕坐标。
• offsetX, offsetY
相對于引發事件的元件坐标。
• x, y
相對于父元件坐标。
• button
滑鼠按下的鍵，1左鍵；2右鍵；4中鍵盤.
• altKey, shiftKey, ctrlKey
altKey, shiftKey, ctrlKey是否按下
• target(FF)/srcElement(IE)
引發事件的元件對象。
事件傳播/事件冒泡(Event Propagation/Event Bubble)
IE 浏覽器中, 事件觸發後會由子元素向父元素逐級傳播, 這種傳播方式
稱為”事件冒泡”. Netscape Navigator 6 以上版本也采用事件冒泡的方式進行事件傳播.
function clickP(e){
var target = e.target || e.srcElement;
alert("clickP, target=" + target.tagName); }
function clickDIV(e){
var target = e.target || e.srcElement;
alert("clickDIV, target=" + target.tagName); }
… … …
<div DIV
<p P</p>
</div>
如何阻止事件冒泡
采用 event.cancelBubble = true; 阻止事件的傳播.
FireFox 原先采用 stopPropagation; 但 3.0 版本以後也支援
cancelBubble.
function clickP(e){
alert("clickP, target=" + target.tagName);
e.cancelBubble = true;
}
function clickDIV(e){
var target = e.target || e.srcElement;
alert("clickDIV, target=" + target.tagName);
}
掌握樣式對象
style和 currentStyle（IE）的差別
元件對象的 style 屬性隻可以擷取内聯樣式；獲得所有的樣式可以采用
currentStyle屬性
getComputedStyle（FF）
在 FireFox中不支援 currentStyle，使用 window.getComputedStyle
代替。
HTMLDOM模型，Window 對象
HTML DOM模型
Window對象 window
• alert方法
彈出一個警告對話框
• confirm方法
彈出一個選擇對話框，傳回使用者是否确認。
• prompt方法
彈出一個供使用者輸入資訊的對話框，傳回使用者輸入資訊。
• setTimeout方法
setTimeout() 方法用于在指定的毫秒數後調用函數或計算表達式。
例如：
setTimout(function(){…}, t)
• clearTimeout方法
clearTimeout() 方法可取消由 setTimeout() 方法設定的 timeout。
• setInterval方法
按照指定的周期（以毫秒計）來調用函數或計算表達式。
setInterval() 方法會不停地調用函數，直到 clearInterval() 被調
用或視窗被關閉。由 setInterval() 傳回的 ID 值可用作
clearInterval() 方法的參數。
var id = setInterval(function(){…}, t);
• clearInterval方法
clearInterval() 方法可取消由 setInterval() 設定的 timeout。
clearInterval() 方法的參數必須是由 setInterval() 傳回的 ID 。 • open方法
打開一個新的視窗，例如：
window.open
('1.html', 'new', 'height=100, width=200, top=0, left=0,
toolbar=no, menubar=no,
scrollbars=no, resizable=no, location=no, status=no')；
window.open 彈出新視窗的指令；
• '1.html' 彈出視窗的檔案名；
• 'new' 彈出視窗的名字；如果該參數指定了一個已經存在的視窗，則
open() 方法不再建立一個新視窗，而隻是傳回對指定視窗的句柄。
• height=100 視窗高度；
• width=200 視窗寬度；
• top=0 視窗距離螢幕上方的象素值；
• left=0 視窗距離螢幕左側的象素值；
• toolbar=no 是否顯示工具欄，yes為顯示；
• menubar 是否顯示菜單欄。
• scrollbars 是否顯示卷軸框。
• resizable=no 是否允許改變視窗大小，yes為是 。
• location=no 是否顯示位址欄，yes為是。
• status=no 是否顯示狀态欄内的資訊。
傳回值為視窗對象句柄
• close方法 關閉視窗
• resizeBy方法
根據指定的像素來調整視窗的大小。
resizeBy(width,height)
width 使視窗寬度增加的像素數。可以是正、負數值。
height使視窗高度增加的像素數。可以是正、負數值。
• resizeTo() 方法
視窗調整為指定的寬度和高度。
resizeTo(width,height)
width 調整到的視窗的寬度。以像素計。
height 調整到的視窗的高度。以像素計。
• moveBy() 方法
相對視窗的目前坐标把它移動指定的像素。
window.moveBy(x,y)
x 要把視窗右移的像素數
y 要把視窗下移的像素數
• moveTo()
視窗的左上角移動到一個指定的坐标。
window.moveTo(x,y)
x 視窗新位置的 x 坐标
y 視窗新位置的 y 坐标
• scrollBy() 方法 内容滾動指定的像素數。
scrollBy(xnum,ynum)參數 描述
xnum 必需。把文檔向右滾動的像素數。
ynum 必需。把文檔向下滾動的像素數
• scrollTo() 方法
内容滾動到指定的坐标。
scrollTo(xpos,ypos)
xpos 在視窗文檔顯示區左上角顯示的文檔的 x 坐标。
ypos 在視窗文檔顯示區左上角顯示的文檔的 y 坐标。
• status 屬性
設定或傳回視窗狀态欄中的文本。
• document屬性
獲得 Document對象
• location屬性
獲得 Location對象
… … …
Document對象
方法
• write方法
write() 方法可向文檔寫入 HTML 表達式或 JavaScript 代碼。 • getElementById
根據 id獲得元素對象
• getElementsByTagName
根據标記名稱獲得元素對象
• createElement
建立元素對象
• createTextNode
建立文本節點
… … …
屬性
• forms
forms[] 傳回對文檔中所有 Form 對象的引用。
• anchors
anchors[] 傳回對文檔中所有 Anchor 對象的引用。
• images
images[] 傳回對文檔中所有 Image 對象引用。
Form對象
• onsubmit 在送出表單時調用的事件句柄。
Form 對象的 onsubmit 屬性指定了一個事件句柄函數。當使用者單擊了表
單中的 Reset 按鈕而送出一個重置時，就會調用這個事件句柄函數。注
意，當調用方法form.submit() 時，該處理器函數不會被調用。
如果 onsubmit 句柄傳回 fasle，表單的元素就不會送出。如果該函數
傳回其他值或什麼都沒有傳回，則表單會被送出。
• onreset
Form 對象的 onreset 屬性指定了一個事件句柄函數。當使用者單擊了表
意，這個句柄不會作為 Form.reset() 方法響應而被調用。如果
onreset 句柄傳回 fasle，表單的元素就不會重置。
• elements
elements[] 包含表單中所有元素的數組
Select 對象
• length
length 屬性可傳回下拉清單中選項的數目。
例如： select.length=5
• selectedIndex selectedIndex 屬性可設定或傳回下拉清單中被選選項的索引号。
若允許多重選擇，則僅會傳回第一個被選選項的索引号。
• options
傳回包含 <select> 元素中所有 <option> 的一個數組。
如果把 options.length 屬性設定為 0,Select 對象中所有選項都會
被清除； 如果 options.length 屬性的值比目前值小，出現在數組尾部
的元素就會被丢棄。 ； 如果把 options[] 數組中的一個元素設定為 null，
那麼選項就會從 Select 對象中删除。
• add方法
selectObject.add(option,before)
option要添加選項元素。必需是 option元素。
before在選項數組的該元素之前增加新的元素。如果該參數是 null，元
素添加到選項數組的末尾。
• remove方法
selectObject.remove(index)
• onchange
當改變選擇時調用。
Select 對象的 onchange 屬性引用了一個事件句柄函數。當使用者選中一
個選項，或者取消了對一個選項的標明時，就會調用該句柄。這個事件不
會指定新的選項是什麼，必須通過 Select 對象的 selectedIndex 屬性，或者各個 Option 對象的 selected 屬性來确定這一點。
Table 對象
• cell屬性
cells 集合傳回表格中所有單元格的一個數組。
• rows 屬性
rows 集合傳回表格中所有行的一個數組， 該集合包括 <thead>、 <tfoot>
和 <tbody> 中定義的所有行。
• tBodies屬性
tBodies[] 傳回包含表格中所有 tbody 的一個數組。
• tFoot
傳回表格的 TFoot 對象。如果不存在該元素。
• tHead
傳回表格的 THead 對象。如果不存在該元素。
• insertRow
insertRow(index) 方法用于在表格中的指定位置插入一個新行。
傳回一個 TableRow，表示新插入的行。
該方法建立一個新的 TableRow 對象，表示一個新的 <tr> 标記，并把
它插入表中的指定位置。 新行将被插入 index 所在行之前。若 index 等于表中的行數，則新行
将被附加到表的末尾。如果表是空的，則新行将被插入到一個新的
<tbody> 段，該段自身會被插入表中 。 後續可以使用
TableRow.insertCell() 方法給新建立的行添加内容。為該行添加單元
格。
• deleteRow方法
deleteRow(index) 方法用于從表格删除指定位置的行。
TableRows對象
cells
cells[] 傳回包含行中所有單元格的一個數組
rowIndex
傳回該行在表中的位置。
deleteCell方法
deleteCell(index) 方法用于删除表格行中的單元格（<td> 元素 ）。
insertCell方法
insertCell(index) 方法用于在 HTML 表的一行的指定位置插入一個
空的 <td> 元素。
傳回值
一個 TableCell 對象，表示新建立并被插入的 <td> 元素。 該方法将建立一個新的 <td> 元素，把它插入行中指定的位置。新單元格
将被插入目前位于 index 指定位置的表元之前。如果 index 等于行中
的單元格數，則新單元格被附加在行的末尾。後續可以調用 TableCell
的 innerHTML屬性指定單元格中的内容。
掌握幾個簡單 W3C DOM常用方法
參見 XML課程
本文轉自 646676684 51CTO部落格，原文連結：http://blog.51cto.com/2402766/507807，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)