javascript的分离

tdmlxq

浏览: 39291 次
性别:
来自: 成都

最近访客更多访客>>

明少

lsh4894

woodding2008

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JAVASCRIPT

JavaScript CSS HTML 编程

借鉴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);

分享到：

打开一个去掉菜单栏，固定大小的IE浏览器的 ... | HTML标记中的class属性在ie和ff下的不同取 ...

2008-12-01 23:14
浏览 848
评论(0)
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论