事件对象:
1.鼠标事件
onclick 鼠标点击某个对象
ondblclick 鼠标双击某个对象
onmousedown 某个鼠标按键被按下
onmouseup 某个鼠标按键被松开
onmousemove 鼠标被移动
onmouseenter 鼠标被移到某元素之上
onmouseleave 鼠标从某元素移开
例子
js中在标签身上绑定事件
img{
cursor: pointer;
}
</style>
</head>
<body>
<img src="/img/dai.png" onclick="this.src='/img/cai.png'">
</body>
ondbclick双击事件
<body>
<img src="/img/dai.png" id='imgid'>
</body>
<script>
imgidobj=document.getElementById('imgid');
imgidobj.ondblclick=function(){
this.src='/img/cai.png';
}
</script>
鼠标按键被按下和鼠标按键被松开
imgidobj=document.getElementById('imgid');
imgidobj.onmousedown=function(){
this.src='/img/cai.png';
}
imgidobj.onmouseup=function(){
this.src='/img/dai.png';
}
获取鼠标左中右键
imgidobj=document.getElementById('imgid');
imgidobj.onmousedown=function(event){
eb=event.button;
switch(eb){
case 0:
//鼠标左键
this.style.background='#faa';
break;
case 1:
//鼠标中间滚轮
this.style.background='#afa';
break;
case 2:
//鼠标右键
this.style.background='#aaf';
break;
}
}
imgidobj.onmouseup=function(){
this.style.background='#fff';
}
onmouseenter和onmouseleave鼠标移入和移出事件
imgidobj=document.getElementById('imgid');
imgidobj.onmouseenter=function(event){
this.src='/img/cai.png';
this.style.background='#aaf';
}
imgidobj.onmouseleave=function(){
this.src='/img/dai.png';
this.style.background='#fff';
}
onmousemove鼠标移动事件
img{
cursor: pointer;
position: absolute;
top:0px;
left:0px;
width:100px;
height:100px;
}
</style>
</head>
<body>
<img src="/img/dai.png" id='imgid'>
</body>
<script>
imgidobj=document.getElementById('imgid');
document.onmousemove=function(event){
x=event.clientX+20;
y=event.clientY+20;
document.title=x+'-'+y;
imgidobj.style.left=x+'px';
imgidobj.style.top=y+'px';
}
</script>
2.键盘事件
onkeydown 某个键盘的键被按下
onkeyup 某个键盘的键被松开
onkeyup键盘按下事件
<body>
<form action="">
<p>用户名:</p>
<p><input type="text"></p>
<p>密码:</p>
<p><input type="text"></p>
<p>验证码: X2Jk</p>
<p><input type="text" id='verify'></p>
<p>
<input type="submit" value="ok">
</p>
</form>
</body>
<script>
verifyobj=document.getElementById('verify');
verifyobj.onkeyup=function(){
document.title=this.value;
this.value=this.value.toLowerCase();
}
</script>
keyCode键盘码
document.onkeydown=function(event){
ek=event.keyCode;
document.title=ek;
switch(ek){
case 82:
document.body.style.background='#faa';
break;
case 71:
document.body.style.background='#afa';
break;
case 66:
document.body.style.background='#aaf';
break;
}
}
keydown通过方向键控制小人走动
<style>
*{
font-family: 微软雅黑;
}
img{
position: absolute;
left:0px;
top:0px;
cursor: pointer;
}
</style>
</head>
<body>
<img src="/img/cai.png" width="100px" id='imgid'>
</body>
<script>
//获取图片对象
imgobj=document.getElementById('imgid');
//可视屏幕的宽
sw=document.documentElement.clientWidth;
//可视屏幕的高
sh=document.documentElement.clientHeight;
//图片向右的最大距离
dw=sw-100;
//图片向下的最大距离
dh=sh-100;
//y轴的距离
ys=0;
yv=10;
//x轴的距离
xs=0;
xv=10;
document.onkeydown=function(event){
ek=event.keyCode;
switch(ek){
case 37:
//左
xs-=xv;
if(xs<=0){
xs=0;
}
imgobj.style.left=xs+'px';
break;
case 38:
//上
ys-=yv;
if(ys<=0){
ys=0;
}
imgobj.style.top=ys+'px';
break;
case 39:
//右
xs+=xv;
if(xs>=dw){
xs=dw;
}
imgobj.style.left=xs+'px';
break;
case 40:
//下
ys+=yv;
if(ys>=dh){
ys=dh;
}
imgobj.style.top=ys+'px';
break;
}
}
</script>
onkeydown回车出现弹力球效果
<style>
*{
font-family: 微软雅黑;
}
img{
position: absolute;
left:0px;
top:0px;
cursor: pointer;
}
</style>
</head>
<body>
<img src="/img/cai.png" width="100px" id='imgid'>
</body>
<script>
//获取图片对象
imgobj=document.getElementById('imgid');
//可视屏幕的宽
sw=document.documentElement.clientWidth;
//可视屏幕的高
sh=document.documentElement.clientHeight;
//图片向右的最大距离
dw=sw-100;
//图片向下的最大距离
dh=sh-100;
//y轴的距离
ys=0;
yv=10;
//x轴的距离
xs=0;
xv=30;
document.onkeydown=function(event){
ek=event.keyCode;
if(ek==13){
setInterval(function(){
//上下
ys+=yv;
if(ys>=dh){
ys=dh;
yv=-yv;
}
if(ys<=0){
ys=0;
yv=-yv;
}
imgobj.style.top=ys+'px';
//左右
xs+=xv;
if(xs>=dw){
xs=dw;
xv=-xv;
}
if(xs<=0){
xs=0;
xv=-xv;
}
imgobj.style.left=xs+'px';
},50);
}
}
</script>
**
3.表单事件
onblur 元素失去焦点
onfocus 元素获得焦点
onselect 文本被选定
onchange 用户改变域的内容
onsubmit 提交按钮被点击
onreset 重置按钮被点击
onblur元素失去焦点、onfocus 元素获得焦点
<style>
*{
font-family: 微软雅黑;
}
</style>
</head>
<body>
<h2>表单事件</h2>
<form action="">
<p>用户名:</p>
<p><input type="text" id='username'></p>
<p>密码:</p>
<p><input type="text" id='password'></p>
<p>
<input type="submit" value="提交">
<input type="reset" value="取消">
</p>
</form>
</body>
<script>
usernameobj=document.getElementById('username');
usernameobj.onfocus=function(){
document.title=1;
}
usernameobj.onblur=function(){
document.title=2;
}
</script>
outlineColor样式在js中以驼峰式书写
<script>
usernameobj=document.getElementById('username');
usernameobj.onfocus=function(){
this.style.outlineColor='#f00';
}
</script>
onfocus点击文本框删除值
usernameobj=document.getElementById('username');
usernameobj.onfocus=function(){
this.value='';
}
onblur对密码长度进行判断
usernameobj=document.getElementById('username');
usernameobj.onblur=function(){
l=this.value.length;
document.title=l;
if(l<8){
alert('用户名长度至少8位!');
}
}
onselect当选中表单框中的文字时
usernameobj=document.getElementById('username');
usernameobj.onselect=function(){
this.value='小菜';
}
onchange当表单中值发生变化时
usernameobj=document.getElementById('username');
usernameobj.onchange=function(){
document.title='123';
}
onchange当下拉菜单的选项发生改变时
<body>
<h2>表单事件</h2>
<form action="">
<p>选择城市:</p>
<p>
<select name="city" id='sid'>
<option value="">--选择城市--</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="天津">天津</option>
<option value="太原">太原</option>
</select>
</p>
<p>
<input type="submit" value="提交">
<input type="reset" value="取消">
</p>
</form>
</body>
<script>
sidobj=document.getElementById('sid');
sidobj.onchange=function(){
val=this.value;
alert(val);
}
</script>
onsubmit当表单提交的时候
<body>
<h2>表单事件</h2>
<form action="get.php" method='post' id='fid'>
<p>用户名:</p>
<p><input type="text" name='username' id='username'></p>
<p>密码:</p>
<p><input type="password" name="password" id='password'></p>
<p>
<input type="submit" value="提交">
<input type="reset" value="取消">
</p>
</form>
</body>
<script>
fidobj=document.getElementById('fid');
usernameobj=document.getElementById('username');
passwordobj=document.getElementById('password');
fidobj.onsubmit=function(){
uv=usernameobj.value.length;
pv=passwordobj.value.length;
if(uv>=6 && pv>=8){
//提交
return true;
}else{
//阻止提交
return false;
}
}
</script>
onreset当表单被清空时
fidobj=document.getElementById('fid');
usernameobj=document.getElementById('username');
passwordobj=document.getElementById('password');
fidobj.onreset=function(){
cf=confirm('您确认取消吗?');
if(cf){
return true;
}else{
return false;
}
}
4.窗口事件
窗口事件:
1.onload 某个页面或图像被完成加载
#页面在加载过程中，首先是完成标签加载完毕，其次是完成图片等静态资源下载完毕(页面加载完毕)
2.onresize 窗口或框架被调整尺寸
3.onscroll 窗口滚动
三个高度:
1.可视区域的高
document.documentElement.clientHeight
2.屏幕的总高度
document.documentElement.scrollHeight
3.已滚动的高
document.documentElement.scrollTop #firefox，ie
document.body.scrollTop #chrome
页面加载完毕(静态资源加载完毕)
<body>
<img src="/img/a.jpg" id='imgid'>
</body>
<script>
imgidobj=document.getElementById('imgid');
window.onload=function(){
h=imgidobj.clientHeight;
w=imgidobj.clientWidth;
document.title=w+'-'+h;
}
</script>
onresize等窗口大小发生改变时
<body>
<img src="/img/a.jpg" id='imgid'>
</body>
<script>
imgidobj=document.getElementById('imgid');
window.onresize=function(){
sw=document.documentElement.clientWidth;
if(sw>1000){
imgidobj.src='/img/cai.png';
}else if(sw>700){
imgidobj.src='/img/dai.png';
}else{
imgidobj.src='/img/a.jpg';
}
}
</script>
可视区域的高
<body>
<h1>0000001</h1>
<h1>0000002</h1>
<h1>0000003</h1>
<h1>0000004</h1>
<h1>0000005</h1>
<h1>0000006</h1>
<h1>0000007</h1>
<h1>0000008</h1>
<h1>0000009</h1>
<h1>0000010</h1>
<h1>0000011</h1>
<h1>0000012</h1>
<h1>0000013</h1>
<h1>0000014</h1>
<h1>0000015</h1>
<h1>0000016</h1>
<h1>0000017</h1>
<h1>0000018</h1>
<h1>0000019</h1>
<h1>0000020</h1>
<h1>0000021</h1>
<h1>0000022</h1>
<h1>0000023</h1>
<h1>0000024</h1>
<h1>0000025</h1>
<h1>0000026</h1>
<h1>0000027</h1>
<h1>0000028</h1>
<h1>0000029</h1>
<h1>0000030</h1>
<h1>0000031</h1>
<h1>0000032</h1>
<h1>0000033</h1>
<h1>0000034</h1>
<h1>0000035</h1>
<h1>0000036</h1>
<h1>0000037</h1>
<h1>0000038</h1>
<h1>0000039</h1>
<h1>0000040</h1>
<h1>0000041</h1>
<h1>0000042</h1>
<h1>0000043</h1>
<h1>0000044</h1>
<h1>0000045</h1>
<h1>0000046</h1>
<h1>0000047</h1>
<h1>0000048</h1>
<h1>0000049</h1>
<h1>0000050</h1>
<h1>0000051</h1>
<h1>0000052</h1>
<h1>0000053</h1>
<h1>0000054</h1>
<h1>0000055</h1>
<h1>0000056</h1>
<h1>0000057</h1>
<h1>0000058</h1>
<h1>0000059</h1>
<h1>0000060</h1>
<h1>0000061</h1>
<h1>0000062</h1>
<h1>0000063</h1>
<h1>0000064</h1>
<h1>0000065</h1>
<h1>0000066</h1>
<h1>0000067</h1>
<h1>0000068</h1>
<h1>0000069</h1>
<h1>0000070</h1>
<h1>0000071</h1>
<h1>0000072</h1>
<h1>0000073</h1>
<h1>0000074</h1>
<h1>0000075</h1>
<h1>0000076</h1>
<h1>0000077</h1>
<h1>0000078</h1>
<h1>0000079</h1>
<h1>0000080</h1>
<h1>0000081</h1>
<h1>0000082</h1>
<h1>0000083</h1>
<h1>0000084</h1>
<h1>0000085</h1>
<h1>0000086</h1>
<h1>0000087</h1>
<h1>0000088</h1>
<h1>0000089</h1>
<h1>0000090</h1>
<h1>0000091</h1>
<h1>0000092</h1>
<h1>0000093</h1>
<h1>0000094</h1>
<h1>0000095</h1>
<h1>0000096</h1>
<h1>0000097</h1>
<h1>0000098</h1>
<h1>0000099</h1>
<h1>0000100</h1>
</body>
<script>
//可视区域的高
h=document.documentElement.clientHeight;
document.title=h;
</script>
屏幕的总高度
h=document.documentElement.scrollHeight;
document.title=h;
判断不同的浏览器、已滚动的高
<body>
<h1>0000001</h1>
<h1>0000002</h1>
<h1>0000003</h1>
<h1>0000004</h1>
<h1>0000005</h1>
<h1>0000006</h1>
<h1>0000007</h1>
<h1>0000008</h1>
<h1>0000009</h1>
<h1>0000010</h1>
<h1>0000011</h1>
<h1>0000012</h1>
<h1>0000013</h1>
<h1>0000014</h1>
<h1>0000015</h1>
<h1>0000016</h1>
<h1>0000017</h1>
<h1>0000018</h1>
<h1>0000019</h1>
<h1>0000020</h1>
<h1>0000021</h1>
<h1>0000022</h1>
<h1>0000023</h1>
<h1>0000024</h1>
<h1>0000025</h1>
<h1>0000026</h1>
<h1>0000027</h1>
<h1>0000028</h1>
<h1>0000029</h1>
<h1>0000030</h1>
<h1>0000031</h1>
<h1>0000032</h1>
<h1>0000033</h1>
<h1>0000034</h1>
<h1>0000035</h1>
<h1>0000036</h1>
<h1>0000037</h1>
<h1>0000038</h1>
<h1>0000039</h1>
<h1>0000040</h1>
<h1>0000041</h1>
<h1>0000042</h1>
<h1>0000043</h1>
<h1>0000044</h1>
<h1>0000045</h1>
<h1>0000046</h1>
<h1>0000047</h1>
<h1>0000048</h1>
<h1>0000049</h1>
<h1>0000050</h1>
<h1>0000051</h1>
<h1>0000052</h1>
<h1>0000053</h1>
<h1>0000054</h1>
<h1>0000055</h1>
<h1>0000056</h1>
<h1>0000057</h1>
<h1>0000058</h1>
<h1>0000059</h1>
<h1>0000060</h1>
<h1>0000061</h1>
<h1>0000062</h1>
<h1>0000063</h1>
<h1>0000064</h1>
<h1>0000065</h1>
<h1>0000066</h1>
<h1>0000067</h1>
<h1>0000068</h1>
<h1>0000069</h1>
<h1>0000070</h1>
<h1>0000071</h1>
<h1>0000072</h1>
<h1>0000073</h1>
<h1>0000074</h1>
<h1>0000075</h1>
<h1>0000076</h1>
<h1>0000077</h1>
<h1>0000078</h1>
<h1>0000079</h1>
<h1>0000080</h1>
<h1>0000081</h1>
<h1>0000082</h1>
<h1>0000083</h1>
<h1>0000084</h1>
<h1>0000085</h1>
<h1>0000086</h1>
<h1>0000087</h1>
<h1>0000088</h1>
<h1>0000089</h1>
<h1>0000090</h1>
<h1>0000091</h1>
<h1>0000092</h1>
<h1>0000093</h1>
<h1>0000094</h1>
<h1>0000095</h1>
<h1>0000096</h1>
<h1>0000097</h1>
<h1>0000098</h1>
<h1>0000099</h1>
<h1>0000100</h1>
</body>
<script>
window.onscroll=function(){
nav=navigator.userAgent;
mt=nav.match(/chrome|firefox|trident/i);
switch(mt[0]){
case 'Chrome':
h=document.body.scrollTop;
break;
case 'Firefox':
h=document.documentElement.scrollTop;
break;
case 'Trident':
h=document.documentElement.scrollTop;
break;
}
document.title=h;
}
</script>
完整的回到顶部特效
<style>
*{
font-family: 微软雅黑;
}
#top{
cursor: pointer;
position: fixed;
right:15px;
bottom:15px;
display: none;
}
</style>
</head>
<body>
<h1>0000001</h1>
<h1>0000002</h1>
<h1>0000003</h1>
<h1>0000004</h1>
<h1>0000005</h1>
<h1>0000006</h1>
<h1>0000007</h1>
<h1>0000008</h1>
<h1>0000009</h1>
<h1>0000010</h1>
<h1>0000011</h1>
<h1>0000012</h1>
<h1>0000013</h1>
<h1>0000014</h1>
<h1>0000015</h1>
<h1>0000016</h1>
<h1>0000017</h1>
<h1>0000018</h1>
<h1>0000019</h1>
<h1>0000020</h1>
<h1>0000021</h1>
<h1>0000022</h1>
<h1>0000023</h1>
<h1>0000024</h1>
<h1>0000025</h1>
<h1>0000026</h1>
<h1>0000027</h1>
<h1>0000028</h1>
<h1>0000029</h1>
<h1>0000030</h1>
<h1>0000031</h1>
<h1>0000032</h1>
<h1>0000033</h1>
<h1>0000034</h1>
<h1>0000035</h1>
<h1>0000036</h1>
<h1>0000037</h1>
<h1>0000038</h1>
<h1>0000039</h1>
<h1>0000040</h1>
<h1>0000041</h1>
<h1>0000042</h1>
<h1>0000043</h1>
<h1>0000044</h1>
<h1>0000045</h1>
<h1>0000046</h1>
<h1>0000047</h1>
<h1>0000048</h1>
<h1>0000049</h1>
<h1>0000050</h1>
<h1>0000051</h1>
<h1>0000052</h1>
<h1>0000053</h1>
<h1>0000054</h1>
<h1>0000055</h1>
<h1>0000056</h1>
<h1>0000057</h1>
<h1>0000058</h1>
<h1>0000059</h1>
<h1>0000060</h1>
<h1>0000061</h1>
<h1>0000062</h1>
<h1>0000063</h1>
<h1>0000064</h1>
<h1>0000065</h1>
<h1>0000066</h1>
<h1>0000067</h1>
<h1>0000068</h1>
<h1>0000069</h1>
<h1>0000070</h1>
<h1>0000071</h1>
<h1>0000072</h1>
<h1>0000073</h1>
<h1>0000074</h1>
<h1>0000075</h1>
<h1>0000076</h1>
<h1>0000077</h1>
<h1>0000078</h1>
<h1>0000079</h1>
<h1>0000080</h1>
<h1>0000081</h1>
<h1>0000082</h1>
<h1>0000083</h1>
<h1>0000084</h1>
<h1>0000085</h1>
<h1>0000086</h1>
<h1>0000087</h1>
<h1>0000088</h1>
<h1>0000089</h1>
<h1>0000090</h1>
<h1>0000091</h1>
<h1>0000092</h1>
<h1>0000093</h1>
<h1>0000094</h1>
<h1>0000095</h1>
<h1>0000096</h1>
<h1>0000097</h1>
<h1>0000098</h1>
<h1>0000099</h1>
<h1>0000100</h1>
<img src="/img/top.png" id='top'>
</body>
<script>
topobj=document.getElementById('top');
window.onscroll=function(){
st=document.body.scrollTop;
document.title=st;
if(st>=300){
topobj.style.display='inline';
}else{
topobj.style.display='none';
}
}
topobj.onclick=function(){
st=document.body.scrollTop;
v=50;
sobj=setInterval(function(){
st-=v;
if(st<=0){
st=0;
clearInterval(sobj);
}
document.title=st;
document.body.scrollTop=st;
},10);
}
</script>
onerror当图片加载失败时，出现其他页面
<body>
<img src="cai2.png" id="imgid">
</body>
<script>
imgidobj=document.getElementById('imgid');
imgidobj.onerror=function(){
this.src='/img/dai.png';
}
</script>
oncontextmenu自定义右键菜单
<style>
*{
font-family: 微软雅黑;
}
#menu{
width:100px;
height:170px;
background: #272822;
color:#fff;
font-weight: bold;
text-align: center;
position: absolute;
top:0px;
left:0px;
display: none;
opacity:0.7;
}
#menu a{
text-decoration: none;
color:#fff;
}
#menu a:hover{
color:#0ff;
}
</style>
</head>
<body>
<img src="/img/cai.png" id="imgid">
<div id='menu'>
<p><a href="http://www.baidu.com">百度</a></p>
<p><a href="http://www.yzmedu.com">云知梦</a></p>
<p><a href="">腾讯</a></p>
<p><a href="">网易</a></p>
</div>
</body>
<script>
menuobj=document.getElementById('menu');
document.oncontextmenu=function(event){
x=event.clientX;
y=event.clientY;
menuobj.style.display='block';
menuobj.style.left=x+'px';
menuobj.style.top=y+'px';
return false;
}
document.onclick=function(){
menuobj.style.display='none';
}
</script>
**
**
**
**
5.其他事件
onerror 当加载文档或图像时发生某个错误
oncontextmenu 右键打开菜单
js特效:
1.绑定事件
2.事件触发
3.样式改变
4.属性改变
绑定事件:
1.标签身上
2.js体内
**
**
**
**
**
**
**
**
**
1、
1、
1、
1、
1、
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
