詳解js的事件處理函數(shù)和動態(tài)創(chuàng)建html標(biāo)記方法

更新時(shí)間：2016年12月16日 09:44:39 作者：yangtoude

本文主要對javascript的事件處理函數(shù)，動態(tài)創(chuàng)建html標(biāo)記的兩種方法進(jìn)行詳細(xì)介紹，具有很好的參考價(jià)值，需要的朋友一起來看下吧

1 HTML的事件屬性

全局事件屬性:HTML 4 增加了使事件在瀏覽器中觸發(fā)動作的能力，比如當(dāng)用戶點(diǎn)擊元素時(shí)啟動 JavaScript。

a. Window 事件屬性，針對 window 對象觸發(fā)的事件（應(yīng)用到 <body> 標(biāo)簽），常用的為onload。

b. Form事件，由 HTML 表單內(nèi)的動作觸發(fā)的事件（應(yīng)用到幾乎所有 HTML 元素，但最常用在 form 元素中）：常用的為onblur、onfocus、onselect、onsubmit。

c. keybord事件

d.Mouse事件，由鼠標(biāo)或類似用戶動作觸發(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事件

頁面加載之后立即執(zhí)行一段 JavaScript：<element onload="script">，如果想讓頁面加載后執(zhí)行多個(gè)腳本呢？辦法是:

window.onload = function() {
 script1;
 script2;
 script3;
 ......
 }

但是這個(gè)辦法沒有彈性，如果需要加載的腳本不斷變化,那么代碼也要跟著變化，更好的辦法是:

 function addLoadEvent(func)() {
 var oldonload = window.onload;
 if (typeof window.onload !="function") {
  window.onload = func;
 } else {
  window.onload = function() {
   oldonload();
   func;
  }
 }
 }

4 動態(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)頁設(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)頁設(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)頁,如:

<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);
 }
}

以上就是本文的全部內(nèi)容，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: