HTML和javascript 第三天

         HTML/JS Day 03

掌握事件對象，瞭解什麼是事件冒泡？如何阻止事件冒泡？

    事件對象
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){
     var target = e.target || e.srcElement;
     alert("clickP, target=" + target.tagName); 
    e.cancelBubble = true; 
}
   function clickDIV(e){   
      var target = e.target || e.srcElement; 
alert("clickDIV, target=" + target.tagName);
 }
  … … …
  <div DIV
      <p P</p>
  </div> 
 
 

掌握樣式對象
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 對象的引用。 
•  p_w_picpaths
p_w_picpaths[] 返回對文檔中全部 Image 對象引用。 
… … …
 

Form對象

方法
•  onsubmit 在提交表單時調用的事件句柄。
Form 對象的 onsubmit 屬性指定了一個事件句柄函數。當用戶單擊了表
單中的 Reset 按鈕而提交一個重置時，就會調用這個事件句柄函數。注
意，當調用方法form.submit() 時，該處理器函數不會被調用。
若是 onsubmit 句柄返回 fasle，表單的元素就不會提交。若是該函數
返回其餘值或什麼都沒有返回，則表單會被提交。
•  onreset
Form 對象的 onreset 屬性指定了一個事件句柄函數。當用戶單擊了表
單中的 Reset 按鈕而提交一個重置時，就會調用這個事件句柄函數。注
意，這個句柄不會做爲 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課程