借鉴css的样式与内容分离的机制，可以将javascript实现的行为与html文档的结构和内容分离开来。这样可以为每一个网页预留退路，下面借用javascript dom编程艺术艺术中的例子，简单说明一下实现思路：
首先建立一个链接，home.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Home.html</title>
</head>
<body>
<a href="popup.html">Example</a>
</body>
</html>
然后再写出这个链接的画面popup.html：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>popup.html</title>
</head>
<body>
弹出画面哦！
</body>
</html>
如果我们想让这个链接触发一个onclick事件，然后通过弹出窗口的方式显示popup.html的话，一般的做法是在home.html里添加一个方法，方法里面调用window.open方法弹出popup.html画面，然后通过onclick事件调用此方法。
但是这样写行为和文档的结构结合得很紧密，借鉴css的实现思路，我们是否可以将一个事件的处理和一个属性内容相关联，即建立一个挂钩，css里面是通过class属性，这里js的分离也可以用class来建立这个挂钩，具体实现方法如下。
首先我们修改home.html，为链接添加一个css属性如下
<a href="popup.html" class="popup">Example</a>
然后建立一个common.js，内容如下
/**
* @author jacktom
*/
window.onload = prepareLinks;
function prepareLinks(){
var links = document.getElementsByTagName("a");
for(var i=0; i<links.length; i++){
//支持ie浏览器
if (links[i].getAttribute("className")){
if(links[i].getAttribute("className") == "popup") {
links[i].onclick = function(){
popUp(this.getAttribute("href"));
return false;
}
}
} else if(links[i].getAttribute("class")){//支持ff浏览器
if(links[i].getAttribute("class") == "popup") {
links[i].onclick = function(){
popUp(this.getAttribute("href"));
return false;
}
}
}
}
}
function popUp(winURL) {
window.open(winURL,"popup","width=320,height=480");
}
js代码中的window.onload = prepareLinks;这句话的用途是当整个html加载完成之后，执行prepareLinks方法。这样就可以把我们对某个元素追加的事件加载到页面中。
最后在home.html中应用这个js，
<script type="text/javascript" src="event.js"></script>
完成以上步骤之后，在打开home.html之后，点击Example链接，将会按弹出页面的方式打开popup.html页面。
另外如果想在onload的时候加载多个方法的话，可以用如下的方法实现
首先追加addLoadEvent方法
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function'){
window.onload = func;
}else {
window.onload = function(){
oldonload();
func();
}
}
}
然后将需要在onload时调用的方法明传给addLoadEvent方法，如果有多个的时候，就多次调用:
addLoadEvent(prepareLinks);
//如果还有其他方法，可以继续追加
addLoadEvent(method1);
addLoadEvent(method2):
.
.
.
addLoadEvent(methodn);
分享到：
相关推荐
Chartist.js是一个非常...CSS和JavaScript分离，因此代码比较简洁，使用就相对方便。 使用SVG格式，因此Chartist.js可以很灵活的在Web页面上应用。 响应式图表，支持不同的浏览器尺寸和分辨率。 支持自定义 SASS 架构。
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...
高度模块化 — HTML结构清晰，CSS和JavaScript分离，便于开发者进行定制化开发和功能扩展，无需担心后期维护和更新问题。 SEO优化 — 内置SEO最佳实践，包括元标签管理、清晰的导航结构和语义化的HTML5元素，助力...