JavaScript教程之_事件对象知识

js特效实现的几个基本步骤:

1.绑定事件

2.事件触发

3.样式改变

4.属性改变

绑定事件:

1.标签身上

2.js体内

事件对象:

|1.鼠标事件

onclick      鼠标点击某个对象

ondblclick   鼠标双击某个对象

onmousedown  某个鼠标按键被按下

onkeydown实例之按键按下小人走动效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#pic{width: 10px;height: 10px;background: #af0;border-radius: 5px;position: absolute;left: 0;right: 0;cursor: pointer;}
</style>
</head>
<body>
<div id="pic"></div>
<script>
//获取事件元素的ID
picobj=document.getElementById('pic');
//获取可视窗口的宽
sw=document.documentElement.clientWidth;
//获取可视窗口的高
sh=document.documentElement.clientHeight;
dw=sw-10;
dh=sh-10;
//y,x轴方向
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;
}
picobj.style.left=xs+"px";
break;
case 38:
  //上
ys-=yv;
if(ys<=0){
ys=0;
}
picobj.style.top=ys+"px";
break;
case 39:
  //右
xs+=xv;
if(xs>=dw){
xs=dw;
}
picobj.style.left=xs+"px";
break;
case 40:
  //下
ys+=yv;
if(ys>=dh){
ys=dh;
}
picobj.style.top=ys+"px";
break;
}
}
</script>
</body>
</html>

onkeydown实例之弹力球效果

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
#pic{width: 50px;height: 50px;background: #af0;border-radius: 25px;position: absolute;left: 0;right: 0;cursor: pointer;}
</style>
</head>
<body>
<div id="pic"></div>
<script>
//获取事件元素的ID
picobj=document.getElementById('pic');
//获取元素自身的宽度
picw=parseInt(window.getComputedStyle(picobj).width);
//获取元素自身的高度
pich=parseInt(window.getComputedStyle(picobj).height);
//获取可视窗口的宽
sw=document.documentElement.clientWidth;
//获取可视窗口的高
sh=document.documentElement.clientHeight;
//实际移动范围
dw=sw-picw;
dh=sh-pich;
//y,x轴方向
ys=0;
yv=10;
//x轴方向
xs=0;
xv=10;
document.onkeydown=function(event){
//获取键盘码
ek=event.keyCode;
if(ek == 13){
//alert("1");
setInterval(function(){
//上下
ys+=yv;
if(ys>=dh){
ys=dh;
yv=-yv;
}
if(ys<=0){
ys=0;
yv=-yv;
}
picobj.style.top=ys+'px';
//左右
xs+=xv;
if(xs>=dw){
xs=dw;
xv=-xv;
}
if(xs<=0){
xs=0;
xv=-xv;
}
picobj.style.left=xs+'px';
},60);
}
}
</script>
</body>
</html>


onmouseup    某个鼠标按键被松开

onmouseenter 鼠标从某元素移开

onmouseleave 鼠标被移到某元素之上

onmousemove  鼠标被移动

|2.键盘事件

onkeydown    某个键盘的键被按下

onkeyup      某个键盘的键被松开

//获取可视屏幕的宽

sh=document.documentElement.clientWidth;

//获取可视屏幕的宽

sh=document.documentElement.clientHeight;

onkeypress   某个键盘的键被按下或按住

|3.表单事件

onblur       元素失去焦点

onfocus      元素获得焦点

onselect     文本被选定

onchange     用户改变域的内容

onsubmit     提交按钮被点击

onreset      重置按钮被点击

onload       某个页面或图像被完成加载

onresize     窗口或框架被调整尺寸

|5.其他事件

onerror      当加载文档或图像时发生某个错误

oncontextmenu   右键打开菜单


注意:此文章是站长从千万篇中精心挑选的,请认真对待文章内容。站长提供不易,请动动小手分享一下!如有问题请联系站长,QQ号:1787511717(同微信),邮箱号:1787511717@qq.com,以上内容由沙漏博客的作者颜浩发布到技术学习专栏!
本文章最后修改时间为:2019-01-15 16:11!

内容版权声明:文章由沙漏博客_分享提供!

转载注明出处:https://www.58yanhao.com/a/223.html

分享到:
打赏

觉得本站还不错就打赏一下吧!

支付宝扫一扫打赏

微信扫一扫打赏