工作中偶尔会遇到Javascript冒泡的问题，阻止冒泡的方法：
W3C:stopPropagation()
IE:window.event.cancelBubble = true
运行以下代码，然后注释掉”//阻止冒泡”后面那段代码，看看发生的变化。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 0 Transitional//EN" "http://www.worg/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.worg/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
div {
padding:10px;
border:1px solid #CCC;
}
#d1 {
width:400px;
}
#msg {
border-color:#CCC;
padding:3px;
margin-bottom:10px;
}
</style>
<script>
var isIE = /*@cc_on!@*/!1;
window.onload = m;
function m(){
for (var i=1; i<6; i++){
document.getElementById('d'+i).onmouseover = changeStyle;
document.getElementById('d'+i).onmouseout = changeStyle;
}
}
function changeStyle(e){
e = e || window.event;
var msg = document.getElementById('msg');
if (e.type == 'mouseover'){
this.style.borderColor = '#FF0000';
msg.innerHTML = '你当前鼠标经过的DIV ID：' + this.id;
}else if(e.type == 'mouseout'){
this.style.borderColor = '#CCCCCC';
msg.innerHTML = '鼠标状态';
}
//阻止冒泡
if (isIE){
e.cancelBubble = true;
}else{
e.stopPropagation();
}
}
</script>
</head>
<body>
<div id="msg">鼠标状态</div>
<div id="d1">ID:d1
<div id="d2">ID:d2
<div id="d3">ID:d3
<div id="d4">ID:d4
<div id="d5">ID:d5 </div>
</div>
</div>
</div>
</div>
</body>
</html>
function replaceHtml(el, html) {
var oldEl = typeof el === "string" ? document.getElementById(el) : el;
/*@cc_on // 原始的 innerHTML 在 IE 中的性能好一点
oldEl.innerHTML = html;
return oldEl;
@*/
var newEl = oldEl.cloneNode(false);
newEl.innerHTML = html;
oldEl.parentNode.replaceChild(newEl, oldEl);
/* 一旦我们从 DOM 上移除老的元素，则返回新的元素引用。*/
return newEl;
};
在怿飞的Blog上看到这篇文章，里面有提到“此方法大大提高了 innerHTML 在 Firefox 和 Safari 上的性能。replaceHtml() 在 Firefox 2.0.0.6 里 destroy 与 replace 的速度各快了 473 倍以及 50 倍。而在 Safari 3.0.3 beta 上则是 create 100 倍，replace 50 倍。”
于是在FireFox3.05里测试了一下，循环50000次的结果，直接innerHTML是2000ms左右，而上面的函数需要3300ms左右，不知道是我的测试方法有误，还是新版的FireFox改善了innerHTML的性能~
今天在群里，看有人提到动态加载JS的问题，便整理如下：
function loadJs(jsFile){
if (!jsFile) return;
var oHead = document.getElementsByTagName('HEAD')[0];
var oScript = document.createElement('script');
oScript.type = "text/javascript";
oScript.src = jsFile;
oHead.appendChild(oScript);
}
上面的代码初步地完成了一个JS文件的加载过程，调用”loadJs(指定的js文件名);”就可以加载指定的JS了。
但还不够完善，为了避免重复加载，需要进行一点小小的改动：
function loadJs(jsFile){
if (!jsFile) return;
var oScripts = document.getElementsByTagName('script');
for (var i=0; i<oScripts.length; i++){
if (oScripts[i].src.indexOf(jsFile) > -1) return;
}
var oHead = document.getElementsByTagName('HEAD')[0];
var oScript = document.createElement('script');
oScript.type = "text/javascript";
oScript.src = jsFile;
oHead.appendChild(oScript);
}
如果已经加载了该JS，就跳过下面的步骤，这样，就不会重复加载了。但这样也不是万无一失~因为如果这时候马上执行JS里的脚本的话，也许会提醒你未定义，因为该JS还未加载完成。
———————————————-
2010-03-02 更新
判断是否加载完成，区别于IE和其它浏览器，可以使用
onload事件和onreadystatechange事件来判断
ie不支持onload事件，通过onreadystatechange事件判断readyState属性是否是”loaded”或者”complete”即加载完成
其它浏览器如FF，Chrome，Safari，Opera可以通过onload事件判断是否加载完成。
Demo：/jquery-ye/dialog.html
IE6,IE7,FireFox3,Opear9,Safari通过
Iframe自适应高宽…
只实现了简单的功能，打开HTML窗，和Iframe窗口，还可以扩展更多功能，有空再弄。
