常用事件
鼠标移动事件
onmousemove(event) : 鼠标移动事件 event是事件对象。名字固定onmouseover : 鼠标悬停事件
鼠标悬停事件： 当鼠标移动到某个控件上面的时候发生
示例： 当鼠标移动到p标签上的时候，p标签改变样式 (参见demo01_鼠标悬停事件.html)this: 把this写在那个标签里面就代表那个标签对象this.style.backgroundColor : 当调用样式表中的属性的时候，如果属性中间有横杠，则应去掉.
onmouseout : 鼠标移出事件
鼠标移开事件： 当鼠标从控件上移开的时候示例参见(demo_02_鼠标移开事件.html ;
<style type= "text/css">
div{
width:300px;
height:300px;
border:1px solid red;
}
</style>
<script type="text/javascript">
function fun(e){
var x = e.clientX;
var y = e.clientY;
var txt = document.getElementById("txt");
txt.value = x +":" +y;
}
</script>
<body>
<input type = "text" id = "txt">
<div οnmοusemοve="fun(event)"></div>
</body>
</html><title>鼠标的悬停及移出事件</title>
<style type="text/css">
.one{
color:red ;
border:6px solid green ;
cursor:hand;
}
</style>
</head>
<script type="text/javascript">
<!--
function fun(){
//拿到p标签对象
var p = document.getElementById("p") ;
//定义p的样式
//p.style.color = "red" ;
//p.style.border = "5px dashed green" ;
p.style.backgroundColor = "red" ; //在js中调用css的代码 两种方式:p.style.和使用className
p.className = "one" ;
}
function fun1(){
//拿到p标签对象
var p = document.getElementById("p") ;
p.className = "" ;
}
//-->
</script>
<body>
<p onmouseover = "fun()" οnmοuseοut= "fun1()" id = "p">你好</p>
</body>
</html>鼠标点击事件
onclick : 当鼠标单击某个控件时发生
示例： 当单击按钮时，在<p>中显示字符串 "冠希哥来了" 参见(demo03_鼠标单击事件.html)
<title>鼠标的单击事件</title>
</head>
<script type="text/javascript">
<!--
//示例：点击按钮让图片消失
function init(){
//拿到按钮对象
var btn = document.getElementById("btn") ;
var btn1 = document.getElementById("btn1") ;
//注册事件
btn.onclick = function(){
//拿到图片对象
var img = document.getElementById("img") ;
img.style.display = "none" ;
this.disabled = "true" ;
}
btn1.onclick = function(){
//拿到图片对象
var img = document.getElementById("img") ;
img.style.display = "block" ;
//删除属性
var btn = document.getElementById("btn") ;
btn.removeAttribute("disabled") ;
}
}
function fun2(obj){
obj.value = "新浪" ;
}
function fun3(){
var p = document.getElementById("p") ;
p.innerHTML = "<img src = 'images/1.jpg' width = '200' height = '200'>" ;
}
function fun4(){
var btn2 = document.getElementById("btn2") ;
btn2.removeAttribute("onclick") ;
}
//-->
</script>
<body onload = "init()">
<img src = "images/2.gif" id = "img">
<input type="button" value="图片不见了" id = "btn">
<input type="button" value="显示图片" id = "btn1">
<input type="button" value="搜狐" id = "btn2" onclick = "fun2(this)">
<input type="button" value="添加一副图片" id = "btn2" onclick = "fun3()">
<input type="button" value="去掉搜狐按钮的单击事件" id = "btn2" onclick = "fun4()">
<p id = "p"></p>
</body>
</html>加载与卸载事件
只能写在body或image里面
加载事件(onload) : 在整个页面的元素加载完毕之后发生
卸载事件(onunload) : 是在页面关闭时发生
注意： onload和onunload事件必须写在body或者图片标签里面
示例参见（demo04_加载卸载事件.html）
<title>加载与卸载事件</title>
</head>
<script type="text/javascript">
<!--
function fun(){
alert("你好") ;
}
function fun1(){
alert("你不好") ;
}
function fun2(){
alert("我悄悄的走了") ;
}
//-->
</script>
<body onload = "fun(),fun1()" onunload = "fun2()">
aaaaaaaa
</body>
</html>
聚焦与离焦事件
onfocus, onblur
聚焦事件：是在控件获得焦点的时候发生
离焦事件：是在控件失去焦点的时候发生
示例： 文本框获得焦点的时候改变样式，失去焦点时变回原样(参见demo05_聚焦离焦事件.html)
<title>聚焦离焦事件</title>
</head>
<script type="text/javascript">
<!--
function fun(obj){
obj.style.border = "1px solid red " ;
obj.style.backgroundColor = "#ff66ff" ;
obj.style.color = "green" ;
}
function fun1(obj){
if(obj.value == ""){
alert("内容不得为空") ;
//obj.focus() ; //获得焦点
}
}
//-->
</script>
<body>
<input type="text" name="" onfocus = "fun(this)" onblur = "fun1(this)">
</body>
</html>键盘事件
onkeypress,onkeyup,onkeydown
onkeypress: 按下键盘按键并松开
onkeydown : 按下按键发生
onkeyup: 松开按键
示例参见（demo06_键盘事件.html`）
<title>键盘事件</title>
</head>
<script type="text/javascript">
<!--
function fun(obj,e){
//拿到按键的asc码
obj.value = e.keyCode ;
}
//-->
</script>
<body>
<input type="text" name="" onkeypress = "fun(this,event)">
</body>
</html>提交与重置事件
onsubmit,onreset提交事件： 是在点击提交按钮后发生。(必须写在form表单中)
重置事件： 是在点重置交按钮后发生。
示例： 提交表单中的数据(检查):如果是陈冠希：通过，否则不能提交数据（参见demo07_提交重置事件.html）
<title>提交与重置事件</title>
</head>
<script type="text/javascript">
<!--
function check(form){
//拿到文本框中的内容
var txt = form.username.value ;
//判断内容
if(txt == ""){
document.getElementById("sname").innerHTML = " <font color = red>* 姓名必须填写</font>" ;
form.username.focus() ;
return false;
}
return true ;
}
function fun(form){
alert("重置事件") ;
return true ;
}
//-->
</script>
<body>
<form method="post" action="01-鼠标的单击事件.html" onsubmit = "return check(this)" onreset = "return fun(this)">
姓名:<input type="text" name="username"><span id = "sname"></span><br>
<input type="submit" value = "提交">
<input type="reset" value = "重置">
</form>
</body>
</html>选择与改变事件
onselect:
onchange:
onselect: 只能用于输入框. 当选择输入框中的文本时发生onchange: 用于select和文本框.
对于下拉框是在选项发生变化的时候发生对于文本框是在文本框的内容发生变化并且失去焦点时发生
示例： 当选择文本框的内容时，弹出文本框的内容下拉框的selectedIndex属性：代表选中某项的索引参见(demo08_选择与改变事件.html)
<title>选择与改变事件</title>
</head>
<script type="text/javascript">
<!--
function fun(obj){
alert(obj.value) ;
}
function fun1(v){
alert(v) ;
}
function fun2(v,index){
alert(v + ":" + index) ;
}
//-->
</script>
<body>
<input type="text" name="" onselect = "fun(this)" onchange = "fun1(this.value)" >
<select onchange = "fun2(this.value,this.selectedIndex)">
<option value = "china">中国</option>
<option value = "america"> 美国</option>
<option value = "japan">日本</option>
</select>
</body>
</html>省市联动：
<title>省市联动</title>
</head>
<script type="text/javascript">
<!--
var arr = ["中国","美国","日本"] ;
arr["中国"] = ["北京","上海","钓鱼岛"] ;
arr["美国"] = ["纽约","华盛顿","旧金山"] ;
arr["日本"] = ["东京","大阪","神户"] ;
arr["北京"] = ["海淀","朝阳","昌平","丰台"] ;
arr["上海"] = ["浦东","金山","崇明","浦西"] ;
arr["钓鱼岛"] = ["钓鱼岛东","钓鱼岛南","钓鱼岛西","钓鱼岛北"] ;
arr["纽约"] = ["纽约1","纽约2","纽约3","纽约4"] ;
arr["华盛顿"] = ["华盛顿1","华盛顿2","华盛顿3","华盛顿4"] ;
arr["旧金山"] = ["旧金山1","旧金山2","旧金山3","旧金山4"] ;
arr["东京"] = ["东京1","东京2","东京3","东京4"] ;
arr["大阪"] = ["大阪1","大阪2","大阪3","大阪4"] ;
arr["神户"] = ["神户1","神户2","神户3","神户4"] ;
function init(){
//填充国家
fillData(arr,"country") ;
//填充省市
fillData(arr[arr[0]],"province") ;
//填充地区
fillData(arr[arr[arr[0]][0]],"area") ;
}
function fillData(arr,id){
//清空select选项
document.getElementById(id).options.length = 0 ;
//添加选项
for(var i = 0 ;i<arr.length ;i++){
//创建一个option对象
//第一种
/* var option = new Option() ;
option.text = arr[i] ;
option.value = arr[i] ;*/
//第二种
var option = new Option(arr[i],arr[i]) ;
//将option对象添加到select中
document.getElementById(id).options.add(option) ;
}
}
function changePro(coun){
//添加省市
fillData(arr[coun],"province") ;
//添加地区
fillData(arr[arr[coun][0]],"area") ;
}
function changeArea(pro){
//改变地区
fillData(arr[pro],"area") ;
}
//-->
</script>
<body onload = "init()">
国家：<select id = "country" onchange = "changePro(this.value)"></select>
省市：<select id = "province" onchange = "changeArea(this.value)"></select>
地区：<select id = "area"></select>
</body>
</html>
6865
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
