本节主要讲解JavaScript的事件操作，包括：事件源、事件操作、事件处理程序。
一、事件源：任何一个HTML元素（节点）body，div，button，p，a，h1.....
二、事件:你的操作
鼠标：click 单击
dblclick 双击
contextmenu(在body中)文本菜单
mouseover 放上
mouseout 离开
mousedown 按下
mouseup 抬起
mousemove 移动
键盘：
keypress 键盘事件
keyup 抬起
keydown 按下
文档：
load 加载
unload 关闭
beforeunload 关闭之前
表单：
focus 焦点事件
blur 失去焦点
submit 提交事件
change 改变
其他：
scroll 滚动事件
selectd 选择事件
。。。。。。。
三、事件处理程序
有三种方法加事件
第一种：
格式:<tag on事件=“事件处理程序”/>
例1.
<div id="one">
wwwwwwwwwwww
</div>
<script>
var one=document.getElementById("one");
function show(){
alert(one.innerText);
}
show();
</script>
例.2
<script>
var one=document.getElementById("one");
function show(){
alert(one.innerText);
}
</script>
<div id="one">
wwwwwwwwwwww
</div>
<input type="button" οnclick="show()" value="show">
第二种
<script>
对象.on事件=事件处理程序
</script>
例3
<div id="one">wwwwwwwww</div>
<script>
var one=document.getElementById("one");
one.οnclick=function(){
this.style.backgroundColor="red";//this代表one
}
</script>
第三种(不常用)
<script for="事件源的ID" event="事件">
事件处理程序
</script>
例4
<div id="one">wwwwwwwww</div>
<script for="one" event="onclick">
var one=document.getElementById("one");
one.style.backgroundColor="red";
</script>
例5
<div id="one" οnmοuseοver="show(this,'red')" οnmοuseοut="show(this,'blue')" οnclick="show(this,'yellow')" οndblclick="show(this,'green')">wwwwwww</div>
<script>
function show(obj,col){
obj.style.backgroundColor="col";
}
</script>
例6
<body οncοntextmenu="alert('101--2231343'); return false">
</body>
例7
<body οncοntextmenu="return test()">//注意是return test（）
<script>
function test(){
alert('assdjf');
return false;
}
</script>
</body>
例8
<script>
alert("111111111");
</script>
<body οnlοad="alert('22222222')">
<script>
alert('33333333');
</script>
</body>
<script>
alert('4444444');
</script>
结果是1342
onload是页面加载完后运行的
例9
<script>
function test(){
var one=document.getElementById("one");
alert(one.innerText);
}
</script>
<body οnlοad="test()">
<div id="one">
##########
</div>
</body>
例10//onload 使得html和js文件分离
<script src="test.js"></script>
<body>
<div id="one">
########
</div>
</body>
test.js
οnlοad=function(){
var one=document.getElementById("one");
alert(one.innerText);
}
例11
<script src="test.js"></script>
<body οnunlοad="alert('goodbye')" οnbefοreunlοad="event.returnValue='你小心点'">
<div id="one">
########
</div>
</body>
//点叉的时候会弹出来的东东。
事件（上）
事件对象：
属性：
1.srcElement:设置或获取触发事件的对象
2.keyCode键盘码
例1
<div οnclick="show(this)">aaaaaaaaaaaa</div>
<h2 οnclick="show(this)">bbbbbbb</h2>
<p οnclick="show(this)">wwwwww</p>
<script>
function show(obj){
alert(obj.innerText);
}
</script>
例2
<div οnclick="show()">aaaaaaaaaaaa</div>
<h2 οnclick="show()">bbbbbbb</h2>
<p οnclick="show()">wwwwww</p>
<script>
function show(){
event.srcElement.innerText="abc";
}
</script>
例3
<input type="text" οnkeyup="if(this.value!=this.value.toUpperCase()) this.value=this.value.toUpperCase()">//把字母付成大写
例4
<body οnkeypress="show()">
<script>
function show(){
alert(event.keyCode);
}
</script>
</body>
例5
<body οnkeypress="show()">
<script>
function show(){
if(event.keyCode=="27")//按esc后关闭窗口
window.close();
}
</script>
</body>
例6
<div id="one" style="color:red;font-size:10cm;text-align:center">0</div>
<body οnkeydοwn="show()">
<script>
var one=document.getElementById("one");
var i=1;
var dt=null;
function stop(){
clearIntervar(dt);
}
function start1(){
dt=setInterval(function(){
one.innerText=i;
i++;
},100);
}
start1();
</script>
</body>
<input type="button" οnclick="stop()" value="stop">
<input type="button" οnclick="start1()" value="start">
例7
<body οnkeydοwn="opt()">
<img border="0" style="position:absolute;left:0px;top:0px" id="ren" src="images/ren_q_1.gif">//固定绝对路径，这样才可以动起来
<script>
//获取图片名
function basename(url){
var loc=url.lastIndexOf("/")+1;
return url.substr(loc);
}
//创建人的图片对象
var ren=document.getElementById("ren");
var fx="q";
function changetu(){
if(basename(ren.src).charAt(6)=="1"){
ren.src="images/ren_"+fx+"_2.gif";
}else{
ren.src="images/ren_"+fx+"_1.gif";
}
}
var x=0;
var y=0;
var xs=0;
var ys-=0;
function run(){
ren.style.top=y;
ren.style.left=x;
}
setInterval(function(){
changetu();
run();
},100);
function opt(){
var code=event.keyCode;
switch(code){
//左
case 37:
fx="l";
ys=0;
xs=-5;
break;
//右
case 39:
fx="r";
ys-0;
xs=5;
break;
//上
case 38:
fx="h"
xs=0;
ys=-5;
break;
//下
case 40:
fx="q";
xs=0;
ys=5;
break;
}
}
</script>
</body>
小知识
自动执行的函数
setInterval(,100);//100表示1/10秒；1000表示1秒
事件（下）
事件event window.event
1.srcElement 代表事件源对象
2.keyCode 事件发生时的键盘码 keypress数字和字母，keydown控制方向键的例子 keyup变大写的例子
3.clientX，cliemtY 鼠标坐标
4.screenX,screenY 鼠标坐标
5.returnValue 返回值
6.canceBubble
例.1
<body οnmοusemοve="test()">//鼠标移动事件
<div id="one"></div>
<script>
var one=document.getElementById("one');
function test(){
var cx=event.clientX;
var cy=event.clientY;
var sx=event.screenX;
var sy=event.screenY
var str="clientX=" +cx+",clientY="+cy+"screenX="+sx+"screenY="+sy;
one.innerText=str;
window.status=str;//窗体下面的状态栏
}
</script>
</body>
例.2
<body>
<div id="one"></div>
<script>
var one=document.getElementById("one');
window.document.οnmοusedοwn=function(e){
var ev=e || window.event; //IE是window.event;火狐得传值
alert(ev);
}
</script>
</body>
例.3
<body>//鼠标移动事件
<div id="one"></div>
<script>
var one=document.getElementById("one');
document.onmousemove.function(e){
var ev=e || window.event;
var cx=ev.clientX;
var cy=ev.clientY;
var sx=ev.screenX;
var sy=ev.screenY
var str="clientX=" +cx+",clientY="+cy+"screenX="+sx+"screenY="+sy;
one.innerHTML=str;
window.status=str;//窗体下面的状态栏
}
</script>
</body>
例4
<body>
<img id="tu" style="position:absolute;left:-400px;top:-200px" src="bbs.gif">//写负值就不会在页面上出现
<script>
var tu=document.getElementById("tu");
document.οnmοusemοve=function(e){
var ev=e || window.event;
var x=ev.clientX;
var y=ev.clientY;
tu.style.top=y+20;
tu.style.left=x+20;
}
</script>
</body>
例5
<style>
.one1{ position:absolute;left:100px;top:100px;width:200px;height:30px;background:red;}
</style>
<body>
<input type="button" οnclick="crea()" value="add">
<script>
var one=null;
var down=false;
var dx=0;
var dy=0;
var sx=0;
var sy=0;
function crea(){
if(one!=null)
return;
one=document.createElement("div");
one.className="one1";
document.body.appendChild(one);
one.οnmοusedοwn=function(e){
var ev=e || window.event;
dx=ev.clientX;
dy=ev.clientY;
sx=parseInt(one.style.left);//取整
sy=parseInt(one.style.top);
if(!down)
down=true;
}
one.οnmοuseup=function(){
if(down)
down=false;
}
}
document.οnmοusemοve=function(e){
var ev=e || window.event;
if(down){
one.style.top=ev.clientY-(dy-sy);
one.style.left=ev.clientX-(dx-sx);
}
one.
}
</script>
</body>
例6
<body οncοntextmenu=" show()">
<script>
function show(){
alert('@@@@@@@');
window.event.returnValue=false;
}
</script>
</body>
例7
<body οnclick="one">
<img src="bbs.gif" οnclick="two()">
<script>
function one(){
alert("body onclick ######");
}
function two(){
alert("image onclick @@@@@@");
window.eventcanceBubble=true;//两层里 让这个方法跳出来，如果没这句话的话点击image时就会alert两条信息先是image onclick @@@@@@后是body onclick @@@@@@，因为他在body体里呢
}
</script>
</body>
小知识
事件对象在火狐里不出来，在IE里事件显示正常
要想图片在页面上动，必须使图片脱离文档流
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
