1 HTML的事件屬性
全局事件屬性:HTML 4 增加了使事件在瀏覽器中觸發動作的能力，比如當用戶點擊元素時啟動 JavaScript。
a. Window 事件屬性，針對 window 對象觸發的事件（應用到 <body> 標簽），常用的為onload。
b. Form事件，由 HTML 表單內的動作觸發的事件（應用到幾乎所有 HTML 元素，但最常用在 form 元素中）：常用的為onblur、onfocus、onselect、onsubmit。
c. keybord事件
d.Mouse事件，由鼠標或類似用戶動作觸發的事件：常用的為onclick、onmouseover、onmouseout。
e. Media事件，由媒介（比如視頻、圖像和音頻）觸發的事件（適用于所有 HTML 元素，但常見于媒介元素中，比如 <audio>、<embed>、<img>、<object> 以及 <video>）。
2 事件處理函數
文檔的結構與文檔的行為混雜在一起，例如：
<a href="images/example.jpg" onclick="showPic(this);return false;">
文檔的結構與文檔的行為分開，例如：
element.onclick = function() { showPic(whichpic); return false; }
3 共享onload事件
頁面加載之后立即執行一段 JavaScript：<element onload="script">，如果想讓頁面加載后執行多個腳本呢？辦法是:
window.onload = function() { script1; script2; script3; ...... }但是這個辦法沒有彈性，如果需要加載的腳本不斷變化,那么代碼也要跟著變化，更好的辦法是:
function addLoadEvent(func)() { var oldonload = window.onload; if (typeof window.onload !="function") { window.onload = func; } else { window.onload = function() { oldonload(); func; } } }4 動態創建html標記
a. 兩個傳統的方法
document.write方法和innerHTML屬性，兩者都不是標準化的DOM(W3C標準)所支持的方法和屬性，它們都是html的專有屬性。
document.write方法可以很方便的插入元素標簽，尤其是字符串。但是它與網頁設計應將行為(腳本)和結構(html標簽)分離的原則相背。
<!DOCTYPE html> <html> <head> <meta chaset="utf-8" /> <title>document.write</title> <body> <script> <!--可以很方便的插入元素標簽,尤其是字符串.但是它與網頁設計應將行為(腳本)和結構(html標簽)分離的原則--> document.write("<p>This is inserted by document.write</p>"); </script> </body> </head> </html>innerHTML適合將一大段HTML內容插入網頁,如:
<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. 更加精細化的dom方法-獲取dom節點樹和改變dom節點樹
檢索節點（元素）:document.getElementById和element.getElementsByTagName
創建節點（元素）:document.createElement,document.createTextNode
追加節點（元素）:element.appendChild
插入(將一個節點插入到另一個節點之前):parentEelement.insertBefore(newElement, targetElement)
很有用的屬性：element.parentNode（獲取父節點）、element.nextSibling（獲取兄弟節點）
上面用innerHTML屬性插入HTML的效果用dom方法照樣可以實現:
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方法寫一個將一個節點插入到另一個節點之后的函數：
function insertAfter(newElement, targetElement) { var parent = targetElement.parentNode; if (parent.lastChild == targetElement) { parent.appendChild(newElement); } else { targetElement.inserBefore(newElement, targetElement.nextSibling); }}以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持VeVb武林網！
新聞熱點
疑難解答
