0
点赞
收藏
分享

微信扫一扫

Javascript(六)Javascript基础(DOM事件)


鼠标的移动事件

onmousemove

示例效果:将鼠标移动的x、y值显示在文本框上面

Javascript(六)Javascript基础(DOM事件)_javascript

<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标签样式,移出时样式取消

Javascript(六)Javascript基础(DOM事件)_加载_02

<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)

Javascript(六)Javascript基础(DOM事件)_输入框_03

<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标签中使用。且调用的函数必须有返回值,否则不会进行跳转。

Javascript(六)Javascript基础(DOM事件)_加载_04

<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>


举报

相关推荐

0 条评论