詳解js的事件處理函數(shù)和動態(tài)創(chuàng)建html標(biāo)記方法
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í)也希望多多支持腳本之家!
- 為radio類型的INPUT添加客戶端腳本(附加實(shí)現(xiàn)JS來禁用onClick事件思路代碼)
- 怎么通過onclick事件獲取js函數(shù)返回值(代碼少)
- javascript 動態(tài)改變onclick事件觸發(fā)函數(shù)代碼
- JavaScript利用發(fā)布訂閱模式編寫事件監(jiān)聽函數(shù)
- ES6中javascript實(shí)現(xiàn)函數(shù)綁定及類的事件綁定功能詳解
- JavaScript觸發(fā)onScroll事件的函數(shù)節(jié)流詳解
- 深入理解Node.js 事件循環(huán)和回調(diào)函數(shù)
- 實(shí)例講解javascript注冊事件處理函數(shù)
- js動態(tài)添加input按鈕并給按鈕增加onclick的函數(shù)事件(帶參數(shù))完整實(shí)例
相關(guān)文章
this,this,再次討論javascript中的this,超全面(經(jīng)典)
在JavaScript中,this 的概念比較復(fù)雜。除了在面向?qū)ο缶幊讨?,this 還是隨處可用的。這篇文章介紹了javascript中的this相關(guān)知識,對javascript this相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01JS常見DOM節(jié)點(diǎn)操作示例【創(chuàng)建 ,插入,刪除,復(fù)制,查找】
這篇文章主要介紹了JS常見DOM節(jié)點(diǎn)操作,結(jié)合實(shí)例形式分析了JavaScript針對DOM節(jié)點(diǎn)的創(chuàng)建 ,插入,刪除,復(fù)制,查找等操作相關(guān)函數(shù)與使用技巧,需要的朋友可以參考下2018-05-05three.js開發(fā)3d地圖的實(shí)現(xiàn)示例
本文主要介紹了three.js開發(fā)3d地圖的實(shí)現(xiàn)示例,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07bootstrap監(jiān)聽滾動實(shí)現(xiàn)頭部跟隨滾動
這篇文章主要為大家詳細(xì)介紹了bootstrap監(jiān)聽滾動實(shí)現(xiàn)頭部跟隨滾動,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-11-11JavaScript實(shí)現(xiàn)基礎(chǔ)排序算法的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何利用JavaScript實(shí)現(xiàn)基礎(chǔ)排序算法,如:冒泡排序、選擇排序、插入排序和快速排序,感興趣的可以了解一下2022-06-06微信實(shí)現(xiàn)自動跳轉(zhuǎn)到用其他瀏覽器打開指定APP下載
這篇文章主要介紹了微信實(shí)現(xiàn)自動跳轉(zhuǎn)到用其他瀏覽器打開指定APP下載,小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02