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

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

!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

點(diǎn)擊事件

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試文檔/title

style

/style

/head

body

buttonid="testid"點(diǎn)擊按鈕/button

script

varelement=document.getElementById("testid");

element.unction(){

confirm("你確定你要點(diǎn)擊？")

/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)控的是這個(gè)頁面的加載所以一般都是window調(diào)用

window.onload=function(){

element1.innerText="innerText插入";

element2.innerHTML="h1innerHTML插入/h1"

/script

/body

/html

補(bǔ)充innerText和innerHTML區(qū)別

innerText在頁面上輸出文本內(nèi)容，直接將標(biāo)簽刪除innerHTML在頁面上輸出標(biāo)簽效果以及其內(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");

//到鼠標(biāo)離開的時(shí)候就會(huì)變得是否內(nèi)容修改

element.onchange=function(){

alert("你在修改嗎？")

/script

/body

/html

選中時(shí)觸發(fā)

!DOCTYPEhtml

htmllang="en"

head

metacharset="UTF-8"

title測試文檔/title

style

/style

/head

body

inputid="testid"type="text"value="點(diǎn)擊兩次選選擇"

script

varelement=docu