您好,登錄后才能下訂單哦!
這篇文章將為大家詳細講解有關(guān)JavaScript HTML DOM中如何 對HTML事件做出反應(yīng),小編覺得挺實用的,因此分享給大家做個參考,希望大家閱讀完這篇文章后可以有所收獲。
JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力對 HTML 事件做出反應(yīng)。
我們可以在事件發(fā)生時執(zhí)行 JavaScript,比如當(dāng)用戶在 HTML 元素上點擊時。
HTML 事件的例子:
當(dāng)用戶點擊鼠標(biāo)時
當(dāng)網(wǎng)頁已加載時
當(dāng)圖像已加載時
當(dāng)鼠標(biāo)移動到元素上時
當(dāng)輸入字段被改變時
當(dāng)提交 HTML 表單時
當(dāng)用戶觸發(fā)按鍵時
下面的實例中,當(dāng)用戶在 <h2> 元素上點擊時,會改變其內(nèi)容:
<h2 onclick="this.innerHTML="謝謝!"">請點擊該文本</h2>
下面的實例從事件處理器調(diào)用一個函數(shù):
<!DOCTYPE html> <html> <head> <script> function changetext(id) { id.innerHTML="謝謝!"; } </script> </head> <body> <h2 onclick="changetext(this)">請點擊該文本</h2> </body> </html>
HTML 事件屬性
如需向 HTML 元素分配事件,您可以使用事件屬性。
例如,你可以向 button 元素分配 onclick 事件:
<!DOCTYPE html> <html> <body> <p>點擊按鈕就可以執(zhí)行 <em>displayDate()</em> 函數(shù)。</p> <button onclick="displayDate()">點擊這里</button> <script> function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
注釋:在上面的例子中,名為 displayDate 的函數(shù)將在按鈕被點擊時執(zhí)行。
使用 HTML DOM 來分配事件
HTML DOM 允許您通過使用 JavaScript 來向 HTML 元素分配事件。
例如,可以向 button 元素分配 onclick 事件:
<!DOCTYPE html> <html> <head> </head> <body> <p>點擊按鈕就可以執(zhí)行 <em>displayDate()</em> 函數(shù)。</p> <button id="myBtn">點擊這里</button> <script> document.getElementById("myBtn").onclick=function(){displayDate()}; function displayDate() { document.getElementById("demo").innerHTML=Date(); } </script> <p id="demo"></p> </body> </html>
注釋:在上面的例子中,名為 displayDate 的函數(shù)被分配給 id=myButn" 的 HTML 元素。
onload 和 onunload 事件
onload 和 onunload 事件會在用戶進入或離開頁面時被觸發(fā)。
<!DOCTYPE html> <html> <head> <script> function mymessage() { alert("這段消息由 onload 事件觸發(fā)"); } </script> </head> <body onload="mymessage()"> </body> </html>
onload 事件可用于檢測瀏覽器類型和瀏覽器版本,并基于這些信息來加載網(wǎng)頁的正確版本。
如,onload 和 onunload 事件可用于處理 cookie:
<!DOCTYPE html> <html> <body onload="checkCookies()"> <script> function checkCookies() { if (navigator.cookieEnabled==true) { alert("已啟用 cookie") } else { alert("未啟用 cookie") } } </script> <p>提示框會告訴你,瀏覽器是否已啟用 cookie。</p> </body> </html>
onchange 事件
onchange 事件常結(jié)合對輸入字段的驗證來使用。
例如,當(dāng)用戶改變輸入字段的內(nèi)容時,會調(diào)用 upperCase() 函數(shù):
<!DOCTYPE html> <html> <head> <script> function myFunction() { var x=document.getElementById("fname"); x.value=x.value.toUpperCase(); } </script> </head> <body> 請輸入英文字符: <input type="text" id="fname" onchange="myFunction()"> <p>當(dāng)您離開輸入字段時,會觸發(fā)將輸入文本轉(zhuǎn)換為大寫的函數(shù)。</p> </body> </html>
onmouseover 和 onmouseout 事件
這兩個事件可分別用于在用戶的鼠標(biāo)移至 HTML 元素上方或移出元素時觸發(fā)函數(shù)。
<h2 onmouseover="style.color="red"" onmouseout="style.color="blue""> 請把鼠標(biāo)移到這段文本上 </h2>
下面是一個簡單的 onmouseover-onmouseout 實例:
<!DOCTYPE html> <html> <body> <div onmouseover="mOver(this)" onmouseout="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;"> 把鼠標(biāo)移到上面 </div> <script> function mOver(obj) { obj.innerHTML="謝謝" } function mOut(obj) { obj.innerHTML="把鼠標(biāo)移到上面" } </script> </body> </html>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 構(gòu)成了鼠標(biāo)點擊事件的所有部分:
當(dāng)點擊鼠標(biāo)按鈕時,會觸發(fā) onmousedown 事件,
當(dāng)釋放鼠標(biāo)按鈕時,會觸發(fā) onmouseup 事件
當(dāng)完成鼠標(biāo)點擊時,會觸發(fā) onclick 事件
下面是一個簡單的 onmousedown-onmouseup 實例:
<!DOCTYPE html> <html> <body> <div onmousedown="mDown(this)" onmouseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;"> 請點擊這里 </div> <script> function mDown(obj) { obj.style.backgroundColor="#1ec5e5"; obj.innerHTML="請釋放鼠標(biāo)按鈕" } function mUp(obj) { obj.style.backgroundColor="green"; obj.innerHTML="請按下鼠標(biāo)按鈕" } </script> </body> </html>
下面的實例中,當(dāng)用戶按下鼠標(biāo)按鈕時,更換一幅圖像。
<!DOCTYPE html> <html> <head> <script> function lighton() { document.getElementById("myimage").src="../lighton.gif"; } function lightoff() { document.getElementById("myimage").src="../lightoff.gif"; } </script> </head> <body> <img id="myimage" onmousedown="lighton()" onmouseup="lightoff()" src="../lightoff.gif" /> <p>按住鼠標(biāo)不放可以點亮這盞燈!</p> </body> </html>
onfocus 事件
<!DOCTYPE html> <html> <head> <script> function myFunction(x) { x.style.background="yellow"; } </script> </head> <body> 請輸入英文字符: <input type="text" onfocus="myFunction(this)"> <p>當(dāng)輸入字段獲得焦點時,會觸發(fā)改變背景顏色的函數(shù)。</p> </body> </html>
關(guān)于“JavaScript HTML DOM中如何 對HTML事件做出反應(yīng)”這篇文章就分享到這里了,希望以上內(nèi)容可以對大家有一定的幫助,使各位可以學(xué)到更多知識,如果覺得文章不錯,請把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。