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课程










本文转自 646676684 51CTO博客,原文链接:http://blog.51cto.com/2402766/507807,如需转载请自行联系原作者
目录
相关文章
|
前端开发 JavaScript
前端JavaScript+HTML
前端JavaScript+HTML
77 0
|
JavaScript 前端开发 安全
重学 JS 之在 HTML 中使用 JavaScript
重学 JS 之在 HTML 中使用 JavaScript
|
Web App开发 移动开发 前端开发
JavaScript离别之作——HTML元素操作
JavaScript离别之作——HTML元素操作
136 0
JavaScript离别之作——HTML元素操作
|
前端开发 HTML5 移动开发
《疯狂HTML 5+CSS 3+JavaScript讲义(第2版)》| 每日读本书
面向HTML 5.1规范正式版,以ES 6标准为基础写就,覆盖CSS 3的新增内容。每日搜罗最具权威专业书籍,更多图书请关注“每日读本书”。
1330 0
|
移动开发 JavaScript 前端开发
10个奇幻的HTML5和Javascript效果
导读:10款令人惊奇的HTML5和javascript效果。回到几年前,这些效果是根本不可能实现,只能用flash做,但是现在,已经很轻松的就可以实现了。 Breathing Galaxies 使用键盘来改变形状中的线条样式,或移动鼠标来创建一个新的形状。
725 0
|
JavaScript 前端开发 Go
细谈在HTML中使用JavaScript
细谈在HTML中使用JavaScript 前言 JavaScript是浏览器的内置脚本语言。当网页中嵌入了JavaScript脚本,浏览器加载网页时,就会执行脚本,从而操作浏览器,实现各种动态效果 JavaScript代码嵌入网页的方法 1、<script>元素直接嵌入代码 <script ty.
1238 0
|
Web App开发 JavaScript 前端开发
|
Web App开发 前端开发 JavaScript
|
Web App开发 移动开发 JavaScript
《HTML5和JavaScript Web应用开发》——导读
本书的目标是带你经历研究和开发的所有步骤,在当今这个新颖而大胆的世界中,构建移动优先、灵敏、先进的Web应用以及基于任何JavaScript架构的应用程序。每一章都包含了实际的例子,并使用了所讨论的每个规范。
1339 0