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 对象的引用。 
•  images
images[] 返回对文档中所有 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课程