鼠标的移动事件
onmousemove
示例效果:将鼠标移动的x、y值显示在文本框上面
<style type="text/css">div{
width:300px;
height:300px;
border:#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 = "<font color='#FF0000'>*姓名必须填写</font>";
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){</script>
<body>
<input type="text" name="" onkeypress="fun3(this,event)" onfocus="fun(this)" onblur="fun1(this)"/>
</body>
选择与改变事件
选择事件
<script type="text/javascript">function sele(obj){</script>
<body>
<input type="text" name="" onselect="sele(this)"
</body>
改变事件适用于<input>、<select><textarea>
这些标签。
<script type="text/javascript">function changes(value,index){
alert(value+""+index);
}
</script>
<body>
<select onchange="changes(this.value,this.selectedIndex)">
<option value="a">a</option>
<option value="b">b</option>
<option value="c">c</option>
</select>
</body>