码迷,mamicode.com
首页 > 编程语言 > 详细

Javascript DOM 编程艺术读书笔记16/03/26

时间:2016-03-27 07:02:09      阅读:147      评论:0      收藏:0      [点我收藏+]

标签:

更新时间 2016-03-27 01:14:15

 


 

外设javascript文件操作的标准模板归纳

 

javascript不需要事件必须在HTML文档处理,可以在外部javascript的文件把一个事件添加到HTML的某个元素上

element.event = atciotn

关键是如何把这个元素确定下来,这个问题类似css,可以用class或者id

 

如果把某个事件添加到某个确定id的元素上,可以用getElementById()

document.getElementById("id") .event = action

 

如果事件涉及多个元素,可以用getElementByTagName()和getAttribute()方法把事件添加到特定属性的一组元素上

以onclick事件和popUP()函数为例,实现html中特定a元素,点击后弹出小窗口

 


 

先定义popUp():

function popUp(winURL){

  window.open(winURL,"popup","width=100,height=100");

}


 

  1. 把文档中的所有链接元素(a)放入数组
  2. 遍历数组元素
  3. 如果某个链接元素的class=“popup”,说明需要被点击时调用popUP()

  3中注意一下两点

  • 把这个链接元素的href传递给popUp()函数
  • 取消这个链接的默认行为,不要把这个链接的访问者带到新的窗口

 代码

var links = document.getElementsByTagName("a");

for(var i=0;i<links.length;i++){

  if(links[i].getAttribute("class")=="popup"){

    links[i].onclick = function(){

      popUp(this.getAttribute("href"));

      return false;

    }

  }

}


 

但是上述代码是有一定的问题,不会被运行

第一行:

var links = var document.getElementsByTayName("a");

这条在javasript文件被加载时立即运行,英文词javascript文件从html文档的<head>部分的<script>标签调用,的,所以他将在HTML文档之前加载到浏览器中,而此时HTML文档还没有全部加载到浏览器中,文档模型不完整,美哟完整的DOM,getElementsByTagName()不能正常运行

必须在HTML文档全部加载到浏览器中,才能执行

HTML文档全部加载到浏览器中时,会触发一个时间,这个事件有onload处理函数

HTML被加载到浏览器中时,document对象又是window对象的一个属性,当window对象触发onload事件时,document已经存在

所以在执行上述事件时,可以在之前添加window.onload = prepareLinks;      将上述函数打包在prepareLinks()函数中


总结:

jsp函数动态触发,通过给事件处理函数添加函数实现给web页面的实时控制

其实可以判断,对HTML文档对象进行操作是,几乎所有操作 都在

window.onload = function{

  func1();

  fun2();

  .....

}

有了完整的DOM,才能有document对象,我们得到元素对象好像只能通过document.xxx得到


 

向后兼容性

对象探测

浏览器可能关闭了javaspript,不通浏览器对jsp的功能支持也不通

要到内置函数时,需要判断该函数是否浏览器支持

function myfunc(){

  if(!document.getElementsByTagName())return ; // 如果是onclick触发,不想把用户带到新的窗口,应该return false;所以视具体情况而定

  ...

}

Javascript DOM 编程艺术读书笔记16/03/26

标签:

原文地址:http://www.cnblogs.com/EdsonLin/p/5324705.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!