您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例
js事件，悬停，离开，内容改变
发布时间：2015-03-20 22:12:28编辑：雪饮阅读（）
js的事件是我们在前端编程中经常要用到的，下面介绍下几个常用的事件：
以下是鼠标悬停、离开、表单元素内容的改变、表单元素内容的选中所执行的事件：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<title>Untitled Document</title>
<style type="text/css">
#div1{
width:100px;
height:100px;
background:pink;
}
</style>
<script type="text/javascript">
function over(dangqian){
dangqian.innerHTML="hello";
}
function out(dangqian){
dangqian.innerHTML="world";
}
function bianse(bg){
bg.style.background="green";
}
</script>
</head>
<body>
<div id="div1" onmouseover="over(this)" onmouseout="out(this)"></div>
<form>
<input type="text" onchange="alert('内容改变了')">
<input type="text" onselect="bianse(this)">
</form>
</body>
</html>
代码中，我们共写了两个方法，分别让其div的innerhtml给予不同的值，而我们分别使用了onmouseover（悬停）与onmouseout（离开）来调用方法，并传递参数this，代表着当前元素而方法中括号里面的参数只是形参，接收this罢了。
这样就实现了通过鼠标的悬停与离开来显示不同的innerhtml值的效果制作。
代码中表单元素值的改变事件我们用了最简单一个弹出语句即可，做完一个方法调用，alert是系统预置方法，当然我们也可以自定义方法调用，onchange方法是在表单元素的值发生改变之时才会调用的方法
第二个表单元素的onselect事件是在该元素（输入框）中有内容且该内容被选中（就是我们平时要复制网页上的某些文字，就先用鼠标拖拉选中）时才会执行的事件，这里我们使用了自定义方法使其背景颜色变成绿色。所以你的文本框中必须要有内容可选，可以自己随便输入一些文字以做测试之用。
关键字词：事件,个人博客,雪饮个人博客