當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

javaScript的使用（5）DOM事件

發布時間：2025/1/21 编程问答 26 豆豆

生活随笔收集整理的這篇文章主要介紹了 javaScript的使用（5）DOM事件小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

dom事件

瀏覽器監聽特定的條件或用戶行為,并且觸發相應的操作（函數）

常見的dom事件如下：

onclick：單擊事件

onfocus：焦點事件

onblur：失去焦點事件

onkeydown：鍵盤按下事件

onload：頁面完成加載事件

onmouseover：鼠標懸停事件

onmouseout：鼠標移除事件

<html><head><title>dom事件</title><script type="text/javascript">function clickMe(){alert('點我');alert('haha');}function clearUsername(){var username=document.getElementById("username");username.value="";}function clearUsernameByThis(my){my.value="";}function setMessage(my){var val=my.value;if(val==''){my.value="請輸入用戶名";}}function count(my){var cou=document.getElementById("cou");cou.value=my.value.length;}function bodyload(){var mydiv=document.getElementById("mydiv");mydiv.style.backgroundColor="red";}</script></head><body <input type="button" value="點擊我" /><br /><div id="mydiv" <br /><a href="#" >點擊a標簽</a><br><a href="javascript:alert('xyz')" >點擊a標簽</a><br>用戶名：<input type="text" name="username" value="請輸入用戶名" οnfοcus="alert(this.value)" /><br/><input type="text" id="username" name="username" value="請輸入用戶名" οnfοcus="clearUsernameByThis(this)" οnblur="setMessage(this)" /><br/>請輸入：<input type="text" οnkeydοwn="count(this)"> <input type="text" id="cou" /></body> </html>

<html> <head><title>DOM事件</title><script type="text/javascript">function changeToRed(){var mydiv=document.getElementById("mydiv");mydiv.style.backgroundColor="red";}function changeToBlue(){var mydiv=document.getElementById("mydiv");mydiv.style.backgroundColor="blue";}</script></head><body><div id="mydiv" 我是一段文字</div></body> </html>

轉載于:https://blog.51cto.com/7915791/1347714

總結

以上是生活随笔為你收集整理的javaScript的使用（5）DOM事件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。