浅谈javascript DOM编程之分离javascript

最新推荐文章于 2022-06-27 18:45:31 发布

wangdingbang

最新推荐文章于 2022-06-27 18:45:31 发布

阅读量1.1k

点赞数

分类专栏： web脚本文章标签： javascript 编程 html 文档 function class

本文链接：https://blog.csdn.net/wangdingbang2013/article/details/6292736

版权

web脚本专栏收录该内容

13 篇文章 0 订阅

订阅专栏

javascript现在已经成为十分重要的一门web编程脚本语言了，几乎绝大多数的web程序设计都会用到它，但是，大多数情况下，我们习惯于把javascript写在html页面中，让html代码与javascript混在一起，让我们的代码十分的难以维护，也减少了javascript代码的复用性。并且，我们总是完全的将一些属性写死在元素里，写了很多的代码，完成有限的功能，并且javascript程序复用的时候也相当的麻烦。因此，这绝对不是一个好办法。那么，在厌烦了这样邋遢的“浆糊试”编程方式之后。你考虑过怎样将javascript代码与HTML完全分离吗？

下边，我就根据我自己的心得来浅谈：浅谈javascript DOM编程之分离javascript。我们就直接切入主题吧。

把javascript存入到有关的外部文件并非难事，而问题就出现在内嵌的事件处理函数中。

类似于使用style属性，在HTML文档里使用诸如onclick之类的属性也是一种既没有效率又容易引发问题的做法。如果我们使用一个“挂钩”，就像CSS机制中的class或id属性那样，把javascript代码调用行为与HTML文档的结构与内容分离开，网页就会健壮的多。那么，那么可否用下面的这条语句来表明“当这个链接被点击时，它将调用popUp()函数”的意思呢？

<a href="http://www.example.com/" mce_href="http://www.example.com/" class="popup">Example</a>

我很高兴告诉大家，完全可以这样做，javascript不要求事件必须在HTML页面内部处理，我们可以在外部JavaScript文件里把一个事件添加到HTML文档的某个元素上：

element.event=action……

关键是怎样才能把应该获得这个事件的元素确定下来，这个问题可以使用class或者id属性来解决。

如果你想把一个事件添加到某个带有特定id或者class的元素上，用getElementById()方法就可以解决问题：

getElementById(id).event=action

如果事情涉及多个元素，我们可以使getElementByTagName()和getAttribute()把事件加到有着特定属性的一组元素上。

具体步骤如下（以onclick()事件和popup()函数为例）：

（1）. 把文档里的所有链接全放进一个数组里。

（2）. 遍历数组。

（3）.如果某个连接的class属性等于popup，就说明这个链接被点击时将调用popup()函数。

于是：

A.把这个链接的href属性值传给popup()函数。

B.取消这个链接的默认行为，不让这个链接把访问者带离当前窗口。

下面是实现上述步骤的具体的javascript代码：

var links=document.getElementByTagName("a"); for(var i=0;i<links.length;i++) { if(links[i].className=="popup") { links[i].οnclick=function(){ popUp(this.getAttribute("href")); return false; } } }

以上代码将调用popUp()函数的onclick事件添加到相关的链接上。只要把它们存入到一个外部Javascript文件，我们就等于把这些操作从HTML文档里分离出来了。这就是分离JavaScript 的含义。

还有一个问题需要解决，如果把这个段代码放入外部的JavaScript文件，它将无法正常运行，因为这段代码第一行是:

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

这条语句将要在JavaScript文件被加载时立即执行，因为此JavaScript文件是从HTML文档的<head>部分用<script>标签调用的，所以它将在HTML文档之前加载到浏览器里边，而此时HTML文档还没有完全加载到浏览器里边，文档模型也不完整。没有完整的DOM，getElementByTagName()等方法就不能正常工作。

必须在让这些代码在HTML文档全部加载到浏览器之后才开始执行。还好，HTML文档全部加载完毕时将触发一个事件，这个事件有它自己的事件处理函数。

HTML文档被加载到浏览器的一个窗口里，document对象又是window的一个属性，当window触发onload事件时，document对象已经存在。

我将把我的JavaScript代码打包在perpareLinks()函数里，并把这个函数添加到window对象的onload事件上去，这样一来，就可以正常工作了。

window.οnlοad=perpareLinks; function perpareLinks(){ var links=document.getElementByTagName("a"); for(var i=0;i<links.length;i++){ if(links[i].className=="popup") { links[i].οnclick=function(){ popUp(this.getAttribute("href")); return false; } } } }

别忘了把popUp()函数也保存到外部的JavaScript文件里边去：

function popUp(winURL) { window.open(winURL,"popup","width:320,height:480"); }

这是一个非常简单的例子，但是它成功的演示了怎样才能把结构与行为分离开来，在以后的文章中，我还会向大家介绍几种可以在文档加载时把事件添加到元素上的巧妙方法。

本节完！