Javascript中的dom对象(2)
四、控制事件
-
按钮点击事件 onclick
例如:<script> function 点击事件的处理函数(){ //事件处理动作 } </script> <input type=”button” value=”按钮” onclick=”按钮点击以后的处理函数”/>
-
页面初始化事件 onload
例如:<script> function 处理函数(){ //事件处理动作 } </script> <body onload=”处理函数”></body>
1、常见的javascript事件,事件的具体使用方法
(1)页面初始化事件
-
方法一:通过属性方法调用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function testOnload(){ alert("页面初始化事件"); } </script> </head> <body onload="testOnload();"> </body> </html>
-
方法二:通过window对象调用onload事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> //通过window对象调用onload事件 window.onload=function(){ alert("页面初始化事件"); } </script> </head> <body> </body> </html>
(2)按钮点击事件 onclick
-
方法一:通过属性方法调用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function testClick(){ alert("按钮点击事件"); } </script> </head> <body> <input type="button" value="测试按钮点击事件" onclick="testClick();"/> </body> </html>
-
方法二:通过window对象调用onclick事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function(){ var but1=document.getElementById("but1");//object HTMLInputElement but1.onclick=function(){ alert("按钮点击事件2"); } } </script> </head> <body> <input id="but1" type="button" value="测试按钮点击事件2" /> </body> </html>
(3)onchange 事件,当用户改变输入字段的内容时触发
-
方法一:通过属性方法调用
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function testonchange(){ alert("输入内容被改变是触发1"); } </script> </head> <body> <input type="text" value="hello" onchange="testonchange();" /> </body> </html>
-
方法二:通过window对象调用onchange事件
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function(){ var text1=document.getElementById("text1"); text1.onchange=function(){ alert("输入内容被改变是触发2"); } } </script> </head> <body> <input id="text1" type="text" value="hello" /> </body> </html>
(4)onfocus当获得焦点时触发和onblur当失去焦点时触发
-
例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function testonfocus(){ var text1=document.getElementById("text1"); text1.value=""; } window.onload=function(){ var text1=document.getElementById("text1"); text1.onblur=function(){ var reg1=new RegExp(/^(13[0-9]|14[5|7]|15[0|1|2|3|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/); var val=text1.value; var boo=reg1.test(val); if(boo){ alert("手机号码正确,获取短息验证码"); } else{ alert("手机号码不正确,请重新输入"); } } } </script> </head> <body> <input id="text1" type="text" value="请输入手机号码" onfocus="testonfocus();" /><br> </body> </html>
(5)onmouseover鼠标移到某元素之上 和 onmouseout 鼠标从某元素移开事件
-
例如:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> window.onload=function(){ var img1=document.getElementById("img1"); img1.onmouseover=function(){ img1.style.width="250px"; img1.style.height="250px"; } img1.onmouseout=function(){ img1.style.width="150px"; img1.style.height="150px"; } } </script> </head> <body> <img id="img1" src="imgs/avatar.png" /> </body> </html>
(6)onsubmit 事件会在表单中的确认按钮【submit】被点击时发生。
注意:
-
普通按钮type=“button”,无法触发表单提交事件onsubmit
-
onsubmit事件对应的处理函数一定要有返回值【boolean】
true—提交表单数据;false—不提交表单数据 -
表单的οnsubmit=“return 处理函数”;
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function testOnsubmit(){ var text1=document.getElementById("text1"); var pass1=document.getElementById("pass1"); var span1=document.getElementById("span1"); var username=text1.value; var password=pass1.value; if(username=="zhangsan" && password=="123456"){ alert("登陆成功!"); return true; }else{ span1.innerHTML="<font color='red' size='7'>用户名密码错误!</font>"; return false; } } </script> </head> <body> <span id="span1"></span> <form action="#" method="get" onsubmit="return testOnsubmit();"> 用户名:<input id="text1" name="username" type="text" /><br> 密码:<input id="pass1" name="password" type="password" /><br> <input type="button" value="普通按钮" /><br> <input type="submit" value="登陆" /> </form> </body> </html>
(7)onkeydown 事件会在用户按下一个键盘按键时发生。
注意:
-
testKeydown事件在调用的时候需要一个event参数
-
event参数的keyCode属性得到键盘按键对应的数字。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script> function testKeydown(event){ var num=event.keyCode; if(num==65 || num==37){ alert("向左移动"); } if(num==68 || num==39){ alert("向右移动"); } if(num==87 || num==38){ alert("向上移动"); } if(num==83 || num==40){ alert("向下移动"); } if(num==13){ alert("暂停"); } } </script> </head> <body onkeydown="testKeydown(event);"> </body> </html>
常见的事件:
属性 | 作用 |
---|---|
onabort | 图像的加载被中断。 |
onblur | 元素失去焦点。 |
onchange | 域的内容被改变。 |
onclick | 当用户点击某个对象时调用的事件句柄。 |
ondblclick | 当用户双击某个对象时调用的事件句柄。 |
onerror | 在加载文档或图像时发生错误。 |
onfocus | 元素获得焦点。 |
onkeydown | 某个键盘按键被按下。 |
onkeypress | 某个键盘按键被按下并松开。 |
onkeyup | 某个键盘按键被松开。 |
onload | 一张页面或一幅图像完成加载。 |
onmousedown | 鼠标按钮被按下。 |
onmousemove | 鼠标被移动。 |
onmouseout | 鼠标从某元素移开。 |
onmouseover | 鼠标移到某元素之上。 |
onmouseup | 鼠标按键被松开。 |
onreset | 重置按钮被点击。 |
onresize | 窗口或框架被重新调整大小。 |
onselect | 文本被选中。 |
onsubmit | 确认按钮被点击。 |
onunload | 用户退出页面。 |
2、创建新的 HTML 元素
(1)document.createElement(“元素名称”);
(2)document.createTextNode(“文本内容”);
(3)父元素的dom对象.appendChild(node);
(4)删除元素 父元素的dom对象.removeChild(子元素的dom对象);
例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div{
width: 300px;
height: 300px;
background-color: red;
}
</style>
<script>
window.onload=function(){
var addbut=document.getElementById("add");
var deletebut=document.getElementById("delete");
addbut.onclick=function(){
//创建元素
var hdom=document.createElement("h1");
var htext=document.createTextNode("这是我添加的一个元素");
hdom.appendChild(htext);
var divdom=document.getElementById("div1");
divdom.appendChild(hdom);
}
deletebut.onclick=function(){
var divdom=document.getElementById("div1");
var hdom=document.getElementById("h1");
//删除元素
divdom.removeChild(hdom);
}
}
</script>
</head>
<body>
<div id="div1">
<h1 id="h1">测试添加和移除元素</h1>
</div>
<input id="add" type="button" value="添加元素"><br>
<input id="delete" type="button" value="删除元素"><br>
</body>
</html>