Javascript（六）Javascript基础（DOM事件）
鼠标的移动事件
onmousemove
示例效果:将鼠标移动的x、y值显示在文本框上面
<style type="text/css">
div{
width: 300px;
height: 300px;
border: dashed #0000FF;
}
style>
head>
<script type="text/javascript">
function fun(e){
//获取鼠标移动的x、y值
var x=e.clientX;
var y=e.clientY;
//将x、y值显示在文本框中
var txt=document.getElementById("txt");
txt.value="x:"+x+"y:"+y;
}
script>
<body>
<input type="text" name="" id="txt" />
<div onmousemove="fun(event)">div>
body>鼠标的移入与移出
onmouseover与onmouseout
示例效果：
鼠标移入时改变p标签样式，移出时样式取消
<style type="text/css">
.one{
color: blueviolet;
border: dashed blue;
}
style>
head>
<script type="text/javascript">
function fun1(){
var p=document.getElementById("p");
// p.style.color="red";
// p.style.border="dashed"
//设置类名为one的类选择器样式
p.className="one"
}
function fun2(){
var p=document.getElementById("p");
//下面设置为""与设置为"none"效果一样
p.className="";
p.className="none";
}
script>
<body>
<p onmouseover="fun1()" onmouseout="fun2()" id="p">哈哈哈p>
body>鼠标的点击事件
鼠标的点击事件是通过onclick属性设置的。
网页加载事件（onload）
在body标签中添加onload方法
网页加载完成时会弹出对话框。
<script>
function pop(){
alert("网页加载完成");
}
script>
<body onload="pop()">
body>聚焦离焦事件（onfocus、onblur）
<script type="text/javascript">
function fun(obj){
obj.style.backgroundColor="#00f";
obj.style.color="#f00";
}
function fun1(obj){
if(obj.value==""){
alert("内容不为空");
obj.focus();
}
}
script>
<body>
<input type="text" name="" onfocus="fun(this)" onblur="fun1(this)"/>
body>提交与重置事件（onsubmit、onreset）
onsubmit：提交事件比较重要
onreset：不太重要
这两个必须在form标签中使用。且调用的函数必须有返回值，否则不会进行跳转。
<script type="text/javascript">
function submit(obj) {
//获取输入框内容
var name = obj.username.value;
if(name == "") {
//输入框为空时显示红色文本并将光标放回输入框
document.getElementById("sname").innerHTML = "*姓名必须填写";
obj.username.focus();
return false;
}
//必须要有返回值，返回true跳转，否则不进行跳转
return true;
}
function reset() {
obj.username.value = "";
obj.username.focus();
return true;
}
script>
<body>
<form method="post" action="a.html" onsubmit="return submit(this)" onreset="return reset()">
姓名：<input name="username" type="text" /><span id="sname">span>
<input type="submit" value="提交" />
<input type="reset" value="重置" />
form>
body>键盘事件
onkeypress：按下按键并松开
onkeyup：松开按键
onkeydown：按下按键
做游戏开发的时候可能用的多一些。
<script type="text/javascript">
function fun3(obj){
obj.value= event.keyCode;
}
script>
<body>
<input type="text" name="" onkeypress="fun3(this,event)" onfocus="fun(this)" onblur="fun1(this)"/>
body>选择与改变事件
选择事件
<script type="text/javascript">
function sele(obj){
alert(obj.value);
}
script>
<body>
<input type="text" name="" onselect="sele(this)" />
body>改变事件适用于、