目录
一、DOM事件处理
DOM事件: DOM中的元素可以收到各种事件包含鼠标事件、键盘事件、表单事件等等...
比如:当点击时,onclick()里面定义了一段代码。当点击鼠标时被执行
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件处理</title>
<style>
.app{
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
background-color: #f1f1f1;
cursor: pointer; //鼠标形状
}
</style>
</head>
<body>
<div class="app" onclick="test(this)">戳我</div>
</body>
<script>
window.test = function(elem)
{
elem.innerHTML = "哎呦";
};
</script>
</html>
注意下吧:
- onclick里面可以执行一大段代码
- 多数元素都支持鼠标事件
- 单引号与双引号可以混用
- onclick里可以用的上下文参数:this,event
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件处理</title>
<style>
.app{
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
background-color: #f1f1f1;
cursor: pointer; /*鼠标形状*/
}
</style>
</head>
<body>
<div class="app" onclick="test(this,event)"> 1号 </div>
<div class="app" onclick="test(this,event)"> 2号 </div>
<div class="app" onclick="test(this,event)"> 3号 </div>
</body>
<script>
//th:指向被点中的元素
//evt:包含事件的信息,如点击的位置等等
function test(th,evt)
{
var str=th.innerHTML;
alert("选中了:"+str);
}
</script>
</html>
- 错误是在运行时检查出来的
二、鼠标事件小例子
普通状态下,显示“欢迎”
鼠标移上去显示“您好”
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件处理</title>
<style>
.app{
display: inline-block;
padding: 10px;
border: 1px solid #ccc;
background-color: #f1f1f1;
cursor: pointer; /*鼠标形状*/
}
</style>
</head>
<body>
<div class="app"
onmouseenter="welcome(this)"
onmouseleave="goodbye(this)">
欢迎
</div>
</body>
<script>
function welcome(thiz)
{
thiz.innerHTML = "您好";
thiz.style.backgroundColor = "#00ff00";
}
function goodbye(thiz)
{
thiz.innerHTML = "欢迎";
thiz.style.backgroundColor = "#f1f1f2";
}
</script>
</html>
三、键盘事件例子呀
登录界面,成功后,按回车,出现提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件处理</title>
<style>
.login{
width: 300px;
padding: 20px;
height: 150px;
margin: 100px auto;
background-color: #f1f1f1;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #aaa;
}
.login .prompt{
text-align: center;
margin: 10px auto;
color: #444;
}
input{
width: 100%;
padding: 6px;
margin: 2px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="login">
<div class="prompt">用户登录</div>
<input type="text" placeholder="用户名" /><br />
<input type="password" placeholder="密码" onkeyup="if(event.keyCode==13){enterPressed()}"/>
</div>
</body>
<script>
function enterPressed()
{
alert("登录成功!是否保存密码?");
}
</script>
</html>
四、事件监听器
实现上面效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM事件处理</title>
<style>
.login{
width: 300px;
padding: 20px;
height: 150px;
margin: 100px auto;
background-color: #f1f1f1;
border: 1px solid #ccc;
box-shadow: 1px 1px 3px #aaa;
}
.login .prompt{
text-align: center;
margin: 10px auto;
color: #444;
}
input{
width: 100%;
padding: 6px;
margin: 2px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div class="login">
<div class="prompt">用户登录</div>
<input type="text" placeholder="用户名" /><br />
<input id="password" type="password" placeholder="密码" />
</div>
</body>
<script>
//从DOM中取得目标元素
var elem = document.getElementById("password");
//给目标元素添加一个监听器
elem.addEventListener("keyup",function(){
if(event.keyCode==13)
{
alert("登录成功!是否保存密码?");
}
});
</script>
</html>