DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> 關於JavaScript >> 詳解js的事件處理函數和動態創建html標記方法
詳解js的事件處理函數和動態創建html標記方法
編輯:關於JavaScript     

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

以上就是本文的全部內容,希望本文的內容對大家的學習或者工作能帶來一定的幫助,同時也希望多多支持!

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved