abstrakt：本文主要對(duì)javascript的事件處理函數(shù)，動(dòng)態(tài)創(chuàng)建html標(biāo)記的兩種方法進(jìn)行詳細(xì)介紹.1 HTML的事件屬性全局事件屬性:HTML 4 增加了使事件在瀏覽器中觸發(fā)動(dòng)作的能力，比如當(dāng)用戶點(diǎn)擊元素時(shí)啟動(dòng) JavaScript。 a. Window 事件屬性，針對(duì) window 對(duì)象觸發(fā)的事件（應(yīng)用到 <body> 標(biāo)簽），常用的為onload。 b. Form事
本文主要對(duì)javascript的事件處理函數(shù)，動(dòng)態(tài)創(chuàng)建html標(biāo)記的兩種方法進(jìn)行詳細(xì)介紹.
1 HTML的事件屬性
全局事件屬性:HTML 4 增加了使事件在瀏覽器中觸發(fā)動(dòng)作的能力，比如當(dāng)用戶點(diǎn)擊元素時(shí)啟動(dòng) JavaScript。
a. Window 事件屬性，針對(duì) window 對(duì)象觸發(fā)的事件（應(yīng)用到 <body> 標(biāo)簽），常用的為onload。
b. Form事件，由 HTML 表單內(nèi)的動(dòng)作觸發(fā)的事件（應(yīng)用到幾乎所有 HTML 元素，但最常用在 form 元素中）：常用的為onblur、onfocus、onSELECT、onsubmit。
c. keybord事件
d.Mouse事件，由鼠標(biāo)或類似用戶動(dòng)作觸發(fā)的事件：常用的為onclick、onmouseover、onmouseout。
e. Media事件，由媒介（比如視頻、圖像和音頻）觸發(fā)的事件（適用于所有 HTML 元素，但常見于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）。
2 事件處理函數(shù)
文檔的結(jié)構(gòu)與文檔的行為混雜在一起，例如：
<a href="images/example.jpg" onclick="showPic(this);return false;">
文檔的結(jié)構(gòu)與文檔的行為分開，例如：
element.onclick = function() { showPic(whichpic); return false; }
3 共享onload事件
頁(yè)面加載之后立即執(zhí)行一段 JavaScript：<element onload="script">，如果想讓頁(yè)面加載后執(zhí)行多個(gè)腳本呢？辦法是:
window.onload = function() {
script1;
script2;
script3;
......
}
但是這個(gè)辦法沒(méi)有彈性，如果需要加載的腳本不斷變化,那么代碼也要跟著變化，更好的辦法是:
function addLoadEvent(func)() {
var oldonload = window.onload;
if (typeof window.onload !="function") {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func;
}
}
}
4 動(dòng)態(tài)創(chuàng)建html標(biāo)記
a. 兩個(gè)傳統(tǒng)的方法
document.write方法和innerHTML屬性，兩者都不是標(biāo)準(zhǔn)化的DOM(W3C標(biāo)準(zhǔn))所支持的方法和屬性，它們都是html的專有屬性。
document.write方法可以很方便的插入元素標(biāo)簽，尤其是字符串。但是它與網(wǎng)頁(yè)設(shè)計(jì)應(yīng)將行為(腳本)和結(jié)構(gòu)(html標(biāo)簽)分離的原則相背。
<!DOCTYPE html>
<html>
<head>
<meta chaset="utf-8" />
<title>document.write</title>
<body>
<script>
<!--可以很方便的插入元素標(biāo)簽,尤其是字符串.但是它與網(wǎng)頁(yè)設(shè)計(jì)應(yīng)將行為(腳本)和結(jié)構(gòu)(html標(biāo)簽)分離的原則-->
document.write("<p>This is INSERTed by document.write</p>");
</script>
</body>
</head>
</html>
innerHTML適合將一大段HTML內(nèi)容插入網(wǎng)頁(yè),如:
<div id="testdiv">
</div>
window.onload = function() {
var testdiv = document.getElementById("testdiv");
testdiv.innerHTML = "<p>This is INSERTed by <em>innerHTML</em></p><en>";
}
b. 更加精細(xì)化的dom方法-獲取dom節(jié)點(diǎn)樹和改變dom節(jié)點(diǎn)樹
檢索節(jié)點(diǎn)（元素）:document.getElementById和element.getElementsByTagName
創(chuàng)建節(jié)點(diǎn)（元素）:document.createElement,document.createTextNode
追加節(jié)點(diǎn)（元素）:element.appendChild
插入(將一個(gè)節(jié)點(diǎn)插入到另一個(gè)節(jié)點(diǎn)之前):parentEelement.INSERTBefore(newElement, targetElement)
很有用的屬性：element.parentNode（獲取父節(jié)點(diǎn)）、element.nextSibling（獲取兄弟節(jié)點(diǎn)）
上面用innerHTML屬性插入HTML的效果用dom方法照樣可以實(shí)現(xiàn):
window.onload = function() {
var testdiv = document.getElementById("testdiv");
var para = document.createElement("p");
testdiv.appendChild(para);
var context1 = doument.createTextNode("This is INSERTed by ");
para.appendChild(context1);
var emphasis = document.createElement("em");
para.appendChild(emphasis);
var context2 = document.createTextNode("method of domcore");
emphasis.appendChild(context2);
}
利用上面的dom方法寫一個(gè)將一個(gè)節(jié)點(diǎn)插入到另一個(gè)節(jié)點(diǎn)之后的函數(shù)：
function INSERTAfter(newElement, targetElement) {
var parent = targetElement.parentNode;
if (parent.lastChild == targetElement) {
parent.appendChild(newElement);
} else {
targetElement.inserBefore(newElement, targetElement.nextSibling);
}
}更多關(guān)于詳解js的事件處理函數(shù)和動(dòng)態(tài)創(chuàng)建html標(biāo)記方法請(qǐng)關(guān)注PHP中文網(wǎng)（ipnx.cn）其它文章！