JavaScript中DOM操作常用事件总结

第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