第JavaScript中DOM操作常用事件總結演示鼠標劃過和離開

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試文檔/title

style

div{

width:200px;

height:200px;

background-color:blue;

/style

/head

body

divid="testid"/div

script

varelement=document.getElementById("testid");

element.unction(){

element.;

element.onmouseout=function(){

element.;

/script

/body

/html

點擊事件

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試文檔/title

style

/style

/head

body

buttonid="testid"點擊按鈕/button

script

varelement=document.getElementById("testid");

element.unction(){

confirm("你確定你要點擊？")

/script

/body

/html

load加載頁面事件

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試文檔/title

style

/style

/head

body

divid="testid1"/div

divid="testid2"/div

script

varelement1=document.getElementById("testid1");

varelement2=document.getElementById("testid2");

//一般onload加載是監控的是這個頁面的加載所以一般都是window調用

window.onload=function(){

element1.innerText="innerText插入";

element2.innerHTML="h1innerHTML插入/h1"

/script

/body

/html

補充innerText和innerHTML區別

innerText在頁面上輸出文本內容，直接將標簽刪除innerHTML在頁面上輸出標簽效果以及其內容。

onkeyup鍵盤彈起事件

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試文檔/title

style

/style

/head

body

inputid="testid"type="text"

script

varelement=document.getElementById("testid");

element.onkeyup=function(){

alert("你在輸入內容啊")

/script

/body

/html

內容變化事件

演示：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試文檔/title

style

/style

/head

body

inputid="testid"type="text"

script

varelement=document.getElementById("testid");

//到鼠標離開的時候就會變得是否內容修改

element.onchange=function(){

alert("你在修改嗎？")

/script

/body

/html

選中時觸發

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試文檔/title

style

/style

/head

body

inputid="testid"type="text"value="點擊兩次選選擇"

script

varelement=docu