本文實例總結了Javascript DOM事件操作。分享給大家供大家參考，具體如下：

使用JavaScript可以對HTML頁面上的各種事件進行監聽，如鼠標點擊/釋放，鼠標懸停/離開，等等。

效果圖：

代碼：

/p>

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Javascript 事件

body {background-color:#eeeeee}

div.greenBtn

{

color:white;

background-color:green;

width:200px;

height:20px;

text-align:center;

padding-top:20px;

padding-bottom:20px;

}

button.greenBtn

{

color:white;

background-color:green;

width:200px;

height:50px;

text-align:center;

border:0px;

}

(一)點擊時改變HTML元素內容

1.直接改變

請點擊文字

2.通過函數改變

請點擊文字

function changeText(ele){

ele.innerHTML = "謝謝";

}

function checkCookies(){

if (navigator.cookieEnabled){

// alert("已啟用 cookie")

}else{

// alert("未啟用 cookie")

}

}

(二)onload 和 onunload 事件

onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。

onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本，并基于這些信息來加載網頁的正確版本。

onload 和 onunload 事件可用于處理 cookie

(三)onchange事件

請輸入英文字符：

當您離開輸入字段時，會觸發將輸入文本轉換為大寫的函數。

function toUpper(ele){

ele.value = ele.value.toUpperCase();

}

(四)onmouseover 和 onmouseout 事件

把鼠標放在上面

function mOver(ele){

ele.innerHTML = "謝謝"

}

function mOut(ele){

ele.innerHTML = "把鼠標放在上面"

}

(五)onmousedown、onmouseup 以及 onclick 事件

鼠標抬起

function mDown(ele){

ele.innerHTML = "鼠標已按下"

ele.style.backgroundColor = "blue"

}

function mUp(ele){

ele.innerHTML = "鼠標抬起"

ele.style.backgroundColor = "green"

}

(六)onfocus 事件

當輸入框獲取焦點時，改變其背景色

onfocus = "changeBgColor(this,true)"

οnblur="changeBgColor(this,false)">

function changeBgColor(ele,hasFocus){

if(hasFocus){

ele.style.backgroundColor = "yellow"

}else{

ele.style.backgroundColor = "gray"

}

}

PS:關于javascript常用事件及相關說明還可參考本站在線工具：

希望本文所述對大家JavaScript程序設計有所幫助。

總結

以上是生活随笔為你收集整理的html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)...的全部內容，希望文章能夠幫你解決所遇到的問題。

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