JavaScript中DOM操作常用事件總結(jié)

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

!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加載是監(jiān)控的是這個頁面的加載所以一般都是window調(diào)用

window.onload=function(){

element1.innerText="innerText插入";

element2.innerHTML="h1innerHTML插入/h1"

/script

/body

/html

補充innerText和innerHTML區(qū)別

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

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("你在輸入內(nèi)容啊")

/script

/body

/html

內(nèi)容變化事件

演示：

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試文檔/title

style

/style

/head

body

inputid="testid"type="text"

script

varelement=document.getElementById("testid");

//到鼠標離開的時候就會變得是否內(nèi)容修改

element.onchange=function(){

alert("你在修改嗎？")

/script

/body

/html

選中時觸發(fā)

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試文檔/title

style

/style

/head

body

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

script

varelement=docu