1、关于事件
在我们使用JavaScript编写脚本语言时,会发现我们会常常用到各种事件,如简单的单击事件onclick (通过鼠标点击触发事件), onkeydown(键盘事件 按下键盘上任意健值触发)等等, 通过对这些事件的设置,javascript可以触发网页中设置好的事件, 事件的触发可以是用户的行为,也可以是浏览器的行为 事件通常有这几种案例, 元素被点击时, 页面加载完后,元素被鼠标经过时, 或者HTML的input标签改变时 事件通常有以下几种.
2、HTML标签内联事件
在学习JavaScript初始时,我们常用到HTML的内联属性(需要注意的是,这种方法尽量避免使用因为不利于维护修改 除非必须使用)
代码如下:
<inputtype="button"name="btn" id="btn"οnclick="alert('HTML内联属性')"value="按钮"/>
//原理是在input标签中使用按钮button样式,并且在里面加入onclick(鼠标单击事件)通过点击按钮,页面加载后弹出alert里面的字符串.
3、DOM属性绑定事件
通过对页面元素、节点、标签、ID的获取,然后使用对应的事件.
代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>汐玬纱个人博客</title>
<meta name="keywords" content="汐玬纱,个人博客" />
<meta name="description" content="这是我的博客网站" />
<!--css部分-->
<styletype="text/css">
*{margin: 0; padding: 0;}
#box{width: 100px;height: 100px;}
</style>
<!--js部分-->
<scripttype="text/javascript">
window.οnlοad=function(){
var oBox=document.getElementById('box');
oBox.οnmοuseοver=function (){
alert('你经过了这个DIV盒子');
};
};
</script>
</head>
<body>
<!--body部分-->
<div id="box"></div>
</body>
</html>
4、常用的事件
4.1、鼠标事件集合
onclick 鼠标单击元素时触发
ondbclick 鼠标双击元素时触发
onmouseover 鼠标经过元素时触发
onmouseout 鼠标离开元素时触发
onmousemove 鼠标在元素移动时触发
onmousedown 鼠标的按键按下时触发
onmouseup 鼠标的按键松开时触发
oncontextmenu 鼠标的右键打开上下文菜单时触发
onmouseenter 鼠标指针移动到元素上触发
onmouseleave 鼠标指针移出元素时触发
4.2、键盘事件集合
onkeydown 任意键盘上的按键被按下时触发
onkeyup 任意键盘上的按键被送开时触发
onkeypress 任意键盘上的按键被按下并且松开时
4.3、框架/对象(Frame/Object)事件
4.4、表单事件
4.5、剪贴板事件
4.6、打印事件
4.7、拖动事件
4.8、多媒体(Media)事件
4.9、动画事件
4.10、过渡事件
4.11、其他事件
4.12、目标事件对象
4.13、事件监听对象
4.14、文档事件对象
4.15、鼠标/键盘事件对象
4.16、鼠标/键盘事件对象
altKey 触发时返回检测"Alt"健是否被按下
button 触发时返回当前哪个鼠标按键被按下
clientX 触发时返回当前事件鼠标的X轴的坐标值
clientY 触发时返回当前事件鼠标的Y轴的坐标值
ctrlKey 触发时返回当前Ctrl键是否被按下
Location 触发时返回按键在键盘上的位置
charCode 触发时返回onkeypress键值的字母代码
key 触发时返回当前按键按下的标识符
keyCode 返回按下松开键盘按键的值,或按下/松开键盘事件的值
which 返回按下松开键盘按键的值,或按下/松开键盘事件的值
metaKey 返回当前事件被触发时,"meta"键是否被按下
relatedTarget 返回与事件的目标节点相关的节点
screenX 返回当某个事件被触发时,鼠标指针的水平坐标
screenY 返回当某个事件被触发时,鼠标指针的垂直坐标
shiftKey 返回当事件被触发时,"SHIFT"键是否被按下
initMouseEvent() 初始化鼠标事件对象的值
initKeyboardEvent() 初始化键盘事件对象的值
今天,我在这里要讲的是关于键盘鼠标事件的一部份应用以及代码案例.
首先,我要讲的是关于event对象, event对象表示事件当前的状态, 例如触发event对象的元素后,鼠标的位置及其状态,或者当前按下键盘上的键位等等.需要注意的是event对象只在发生的过程中有效. event的某些属性值对待定的事件有意义. 就像:fromElement 和toElement 属性只对onmouseover 和 onmouseout事件有意义.下面我们从event对象常用的获取当前鼠标的坐标值开始说, 首先我们需要知道获取鼠标当前坐标值的事件.
clientX(获取当前鼠标X轴的坐标值)
clientY(获取当前鼠标Y轴的坐标值)
案例一,任意点击页面.任意位置弹出对话框
代码如下:
<script type="text/javascript">
//文档对象模型.鼠标单击时,执行右边的函数
document.οnclick=function (){
//弹出对话框
alert('您点击了页面!');
};
</script>
以上代码能够实现在页面任意位置鼠标单击弹出对话框.
在做这个例子的时候,我使用过
document.body=function (){alert('你点击了当前页面!');};
但是我发现,在浏览器页面浏览时,我并没有得到想要的结果. 在苦苦思索后,我找到了原因, 我通过 文档对象 的主体body 内容部分.鼠标单击时,弹出 对话框. 但是,当前情况下
我的网页文件内,body是没有任何东西的,so 我的鼠标单击body弹出对话框无效,因为body内并没有任何元素时,(除非我设置body的高度,不然body的实际默认高度是为零的),一般
body的高度是我们在主体部分写的元素撑开的高度,而当前内容为空时,body的高度为零,所以我无论怎么点击页面,都不会执行我的js代码块.
tagName(标签名) <之前我们常常使用这个函数getElementsByTagName 通过标签名获取元素> .
随后我做了一系列修改 然后我使用( chilaNodes )弹出document的节点.
代码如下:
//文档对象模型.鼠标单击时,执行右边的函数
document.οnclick=function (){
//弹出对话框
alert('您点击了页面!');
alert(document.childNodes[0].tagName);
};
需要注意的是childNodes兼容性不是那么完美,所以当下,我使用IE浏览器进行测试, 我们得了一个 ! 叹号 然后我找到了网页页面文档 的文档类型<!DOCTYPE html> 由此可见,
我们通过document 获取的节点是网页节点中的第一个节点 (也是最大的节点) 然后, 我再 用alert 弹出 childNodes[1] 然后我们 看到 页面加载完成后 , 弹出了HTML 我们再返回
网页中查看 节点可以看到 HTML 元素节点是除了 文档类型 !DoCTYPE 之后的第二大 元素节点 . 从这里我们可以看出. document 包含了最大的 节点<!DOCTYPE html>因为我
们弹出它的第一个子节点时,得到了 <!DOCTYPE html> (非普通的元素节点是文档说明 文档的类型)可以看出 , document 它是一个隐性节点 在文档的 最外面 .包含着所有的页面
元素. 所以 我们通过document 点击页面任意位置时 (作用域最大) 所以能实现 通过点击document 弹出对话框.
案例二,点击页面任意 位置 弹出当前位置的X轴 Y轴 坐标
代码如下:
window.οnlοad=function (){
document.οnclick=function (){
//弹出当前页面的 X轴加Y轴的鼠标坐标值
alert(event.clientX+','+event.clientY);
};
};
但是我发现 , 这样写代码有兼容性问题 IE浏览器能获取 而火狐 谷歌浏览器 不兼容 火狐和谷歌浏览器的内核 下面我做一个处理浏览器兼容性 .
代码如下:
<span style="font-size:14px;">document.οnclick=function (ev){alert(ev.clientX+','+ev.clientY);};</span>
通过检测 这段代码的兼容性比之前好很多.兼容IE9以上的IE浏览器 兼容火狐 兼容谷歌 ,IE9兼容性已经很好了. 但是想完美兼容IE9以下还是不行,得继续做修改.兼容性处理。
做兼容处理的办法:用if else 去判断在哪个浏览器为真true (真) 如果为真,浏览器兼容 就会执行以下代码块 否则就 弹出false(假 ) 执行else 的代码块 浏览器对此不兼容
document.οnclick=function (ev){
//如果满足ev为真
if(ev){
//弹出true真!
alert(true);
}
//否则 不满足时
else{
//弹出false 假
alert(false);
}
};
通过这段代码,我们还能对程序进行改进
document.οnclick=function (ev){
//如果满足ev为真
if(ev){
//弹出在兼容火狐谷歌浏览器的代码块!
alert(ev.clientX+','+ev.clientY);
}
//否则 不满足时弹出兼容IE浏览器的代码块
else{
//弹出false 假
alert(event.clientX+','+event.clientY);
}
};
在IE、火狐、谷歌浏览器执行代码后、我们可以看到程序已经完美的兼容各版本的浏览器了 (处理兼容的另一种写法如下)
//处理兼容问题的第二种写法
window.οnlοad=function (){
document.οnclick=function (ev){
//声明一个变量 使用当兼容ev(火狐、谷歌)或 event(IE)
var oEvent=ev || event;
//弹出当前代码块
alert(oEvent.clientX+','+oEvent.clientY);
};
};
*需要注意的是 在第二种兼容性写法中, 我们用到了
逻辑运算符号, || 与 让变量值等于右边 只要两边的条件满足其一的时候就使用任意值 (只要
有真true即真)
在点击时间的无参函数中, 我们必须加上ev (兼容非IE的写法中,浏览器是需要向形参传一个系统的参数过来的) ev是形参 使得当前鼠标单击事件成为有参函数.
!在这里我不得不说事件冒泡(这是使用事件时尤为需要注意的事情) 以下我通过一个案例 更好的说明 什么是冒泡事件
css部分
<style type="text/css">
div{padding: 40px; cursor: pointer;}
#box1{background: pink;}
#box2{background: plum;}
#box3{background: aqua;}
</style>
HTML body部分
<body>
<div id="box1">盒子一
<div id="box2">盒子二
<div id="box3">盒子三</div>
</div>
</div>
</body>
js部分
window.οnlοad=function (){
//声明变量 通过标签获取元素
var aDiv=document.getElementsByTagName('div');
//循环所有的div
for(var i=0;i<aDiv.length;i++){
//当 div任意一个被点击时
aDiv[i].οnclick=function(){
//弹出 当前 div的盒子内容
alert(this.innerHTML);
}
}
我们会发现,我们点击最外面的大盒子时 会弹出盒子一 点击大盒子里面包着的第二个盒子时 会弹出 盒子二 点击最小的盒子的时候 会弹出盒子三
其实,当我们点击第二个盒子就会发现,点击完毕后 弹出了两个值 盒子二 和 盒子一 当我们点击盒子三的时候, 返回了三个值 盒子三 盒子二 盒子一 从HTML中的代码中我们可以
看见 ,盒子属于层叠关系 . 大家这时候会想到 因为盒子 三 在最里面呀 这么弹出值, 也很正常 .(其实这就是冒泡事件!)
首先我们要理解 事件是客户端操作进行发生的事件驱动 即某个事件被用户 /浏览器触发 从而做出相应的动作
冒泡机制 :相信大家都见过扑通的水里 冒泡 从最深处 慢慢的一个气泡往水面上冒在上身的过程中 ,我们可以看到 气泡经过不同深度层次的水 我们可以把水看成我们的文档结
构DOM树 这么气泡 就相当于我们的事件 被出发后 气泡从DOM树的最底 层 一层一层的往上直至(水面) DOM树的根节点.
显而易见 (时间冒泡通常会触发页面内所有的事件这并不是我们想要的结果) 因此我们要禁止事件冒泡
显示隐藏案例禁止冒泡代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>禁止冒泡</title>
<style type="text/css">
div{width: 100px; height: 100px; margin: 0 auto; background: aqua; border: 1px solid paleturquoise;}
</style>
<script type="text/javascript">
window.οnlοad=function (){
var oBtn=document.getElementById('btn');
var oBox=document.getElementById('box');
oBtn.οnclick=function (){
if (oBox.style.display=='none') {
oBox.style.display='block';
} else{
oBox.style.display='none';
}
};
//点击document最大的文档对象 让盒子隐藏
document.οnclick=function (){
oBox.style.display='none';
};
};
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="按钮" />
<div id="box" class="box"></div>
</body>
</html>
通过以上代码,我们能实现普通的页面效果是 鼠标单击按钮时 让隐藏消息的盒子出现 通常是选择 选项 期间如果我们后悔了 通过点击盒子外面的任意一处 让盒子隐藏
以上代码实现了 点击按钮实现盒子显示, 点击盒子外任意位置 让盒子隐藏 (但当我们 发现 点击按钮让盒子显示的时候 却发现 盒子不显示 ) 这就是冒泡事件 通过找到input按钮的元素节点 我们实现点击按钮实现 div盒子的隐藏显示 点击盒子外任意位置隐藏盒子 但是 现在代码不显示是因为冒泡事件 当按钮的单击事件被触发时,就像水滴有了一个气泡,这个气泡会一层一层往上 直至出现在水面 我们设置了通过按钮显示隐藏 div 通过点击document 隐藏div 按钮点击显示div被触发后 冒泡事件迅速的一层一层去往上走 经过document(页面的最大隐性节点水面)的鼠标单击事件时, 也顺带触发了document的隐藏事件. (因此我们需要消除事件冒泡!)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>禁止冒泡</title>
<style type="text/css">
div{width: 100px;display: none; height: 100px; margin: 0 auto; background: aqua; border: 1px solid paleturquoise;}
</style>
<script type="text/javascript">
window.οnlοad=function (){
var oBtn=document.getElementById('btn');
var oBox=document.getElementById('box');
oBtn.οnclick=function (ev){
//兼容性处理
var iEvent=ev || event;
if (oBox.style.display=='none') {
oBox.style.display='block';
} else{
oBox.style.display='none';
}
//取消冒泡事件 当事件冒泡为真的时候 取消事件冒泡
iEvent.cancelBubble=true;
};
//点击document最大的文档对象 让盒子隐藏
document.οnclick=function (){
oBox.style.display='none';
};
};
</script>
</head>
<body>
<input type="button" name="btn" id="btn" value="按钮" />
<div id="box" class="box"></div>
</body>
</html>
clientX(获取当前鼠标X轴的坐标值)
clientY(获取当前鼠标Y轴的坐标值)
案例代码如下<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div跟随鼠标</title>
<style type="text/css">
*{margin: 0; padding: 0;}
#box{width: 100px; height: 100px; background: aqua; position: absolute;}
</style>
<script type="text/javascript">
//文档对象 鼠标移动事件(只要元素内移动一像素就会触发)
document.οnmοusemοve=function (ev){//ev形参 ev (兼容非IE的写法中,浏览器是需要向形参传一个系统的参数)
//event兼容性处理 ev兼容火狐 谷歌 event兼容IE
var oEvent=ev||event;
//通过id找到元素盒子
var oBox=document.getElementById('box');
//盒子距离左边的值 等于获取当前鼠标的X轴坐标+像素
oBox.style.left=oEvent.clientX-50+'px';
//盒子距离头边的值 等于获取当前鼠标的Y轴坐标+像素
oBox.style.top=oEvent.clientY-50+'px';
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
但是随后我们便发现了这样写的一个bug 鼠标随着浏览器滚动条滚动后 box div盒子无法继续再跟随鼠标了 因为 我们给予鼠标跟随 的是clientX和clientY浏览器 当前可视化界面窗口的值 而返回的鼠标坐标点是以左上角为零点 当页面向下滑动时隐藏的头部 和页面向右滚动 隐藏的左边 页面也需要加在里面. 因此我们对代码进行一个完善.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div跟随鼠标</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{width: 2000px; height: 2000px;}
#box{width: 100px; height: 100px; background: aqua; position: absolute;}
</style>
<script type="text/javascript">
//文档对象 鼠标移动事件(只要元素内移动一像素就会触发)
document.οnmοusemοve=function (ev){//ev形参 ev (兼容非IE的写法中,浏览器是需要向形参传一个系统的参数)
//event兼容性处理 ev兼容火狐 谷歌 event兼容IE
var oEvent=ev||event;
//通过id找到元素盒子
//scrollTop 兼容性处理 兼容火狐 谷歌 或 兼容IE
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
var oBox=document.getElementById('box');
//盒子距离左边的值 等于获取当前鼠标的X轴坐标+像素
oBox.style.left=oEvent.clientX+scrollTop-50+'px';
//盒子距离头边的值 等于获取当前鼠标的Y轴坐标+像素
oBox.style.top=oEvent.clientY+scrollLeft-50+'px';
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
通过案例 我们可以看到clientX和clientY 获取鼠标当前的坐标 这两个事件我们经常使用 由此我们可封装成一个函数 以便调用 封装函数中,我们加入了兼容火狐谷歌 IE 与
scrollTop和
scrollLeft的值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>div跟随鼠标</title>
<style type="text/css">
*{margin: 0; padding: 0;}
body{width: 2000px; height: 2000px;}
#box{width: 100px; height: 100px; background: aqua; position: absolute;}
</style>
<script type="text/javascript">
//获取当前鼠标的坐标值
function getPos(ev){//ev形参 是下面兼容处理后传过来的<span style="font-family: Arial, Helvetica, sans-serif;"><span style="color:#ff0000;">oEvent</span></span>
<span style="white-space: pre;"> </span><span style="color:#ff0000;">var scrollTop=document.documentElement.scrollTop||document.body.scrollTop; //兼容火狐谷歌 || 兼容IE
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;</span>
//返回当前值
return {x: <span style="color:#ff0000;">ev</span>.clientX+scrollLeft, y: ev.clientY+scrollTop}; <span style="color:#ff0000;">//josn的写法 存储数据</span>
} //ev 表示传来的形参 oEvent
document.οnmοusemοve=function (ev){
var oEvent=ev||event;
var oBox=document.getElementById('box');
var pos=getPos(oEvent);
oBox.style.left=pos.x-50+'px';
oBox.style.top=pos.y-50+'px';
};
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
在这里面我们用到了json
json使用语法 var json{X:2,Y:4};
循环只能用 for in for(var i in json){ };
弹出json的值:alert(i+'='+json.X); //写在for in 循环里面
i代表的是谁 X代表X的值 在这里面 i 代表这 json 里面的 X 而X则代表了X的值2.
关于json 代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
//json 存储了变量X 与 Y 之间用,逗号隔开
var json={X:88,Y:99};
for(var i in json){
//i代表了json里面的变量 X代表了变量的值 使用for in 会依次弹出所有存储变量的值
alert(i+','+json.X);
}
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
div {width:30px; height:30px; background:red; position:absolute; border-radius:50% ;}
div:nth-child(3n-1){background: palegreen;}
div:nth-child(3n-2){background: aquamarine;}
div:nth-child(3n){background: powderblue;}
</style>
<script>
function getPos(ev)
{ //兼容处理 scrollTop documentElement兼容火狐谷歌 ||或 body 兼容IE 的scrollTop获取
var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
//返回值 数组json的写法 X Y在里面是 变量 ev代表传回的形参 oEvent oEvent.clientX+scrollLeft 鼠标当前的可视化界面的值加上 滚动条左边的距离
return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
}
//文档 鼠标移动一个像素时触发 形参
document.οnmοusemοve=function (ev)
{ //通过标签获取元素 通常使用这种方法获取了元素后 需要使用for 循环遍历到每一个标签元素上面
var aDiv=document.getElementsByTagName('div');
//兼容性处理 oEvent 赋值= ev兼容火狐 谷歌|| event兼容IE
var oEvent=ev||event;
//声明pos变量 将函数获取当前页面可视化 翻滚的头部左边的 鼠标值返回
var pos=getPos(oEvent);
//从最后一个DIV开始循坏 当i>0循环到了第一个时 再i-- <逆向循环>
for(var i=aDiv.length-1;i>0;i--)<span style="color:#ff0000;">//当i等于零的时候就是鼠标停止移动了</span>
{ //任意一个的div 等于 前面的一个div的距离左边的值减一-1代表前一个
aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
}
//循环完上面的所有div后<从后开始循环到前面>但是需要第一个div特别的跟着鼠标走
//数组的循环都是从零开始 这里下标零等于是第一个div
//第一个div距离左边的值等于json数据体的X轴的值加像素 下面同上
aDiv[0].style.left=pos.x+'px';
aDiv[0].style.top=pos.y+'px';
};
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
鼠标事件都有个on在前面 onclick onmouseover 等等
接下的案例是利用event对象 使用键盘控制div移动键盘上每个按键都有一个健值,所以 通过这个健值 我们能达到通过键盘控制页面的元素
键盘事件:onkeydown 键盘按下 的时候 触发keyCode 弹出当前键盘 按键 键值
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>键盘健值</title>
<script>
//页面文档 按键按下触发事件 执行右边的函数 ev形参
document.οnkeydοwn=function (ev)
{ //event兼容性处理 ev兼容谷歌火狐 event兼容IE
var oEvent=ev||event;
//弹出 返回当前值 keyCode
alert(oEvent.keyCode);
};
</script>
</head>
<body>
</body>
</html>
以上代码执行后能够弹出当前按键的值
利用键盘控制div的移动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>键盘控制</title>
<style type="text/css">
#box{width: 100px; height: 100px; position: absolute; background: pink;}
</style>
<script type="text/javascript">
//网页文档 键盘按下任意键触发 执行右边的函数
document.οnkeydοwn=function (ev){
//event兼容性处理 ev兼容火狐 谷歌 || event兼容IE
var oEvent=ev||event;
//通过ID获得元素
var oBox=document.getElementById('box');
//判断当返回的按键值是等于37时
if (oEvent.keyCode==37) {
//div盒子距离左边的值 等于盒子距离左边的值-100加像素 <因为向左边移动是负数>
oBox.style.left=oBox.offsetLeft-100+'px';
}
//当返回按下的减值是等于39时,
else if(oEvent.keyCode==39){
//让div盒子距离左边的值 向右移动100像素 <向右移动是正数>
oBox.style.left=oBox.offsetLeft+100+'px';
}
//当返回的按键值是38时
if (oEvent.keyCode==38) {
//我们让盒子距离上边的距离 每次-100像素 向上是负数
oBox.style.top=oBox.offsetTop-100+'px';
}
//当返回的按键值是40时 代表我们按的是下标键
else if(oEvent.keyCode==40){
//让盒子距离上面的值每次加100 向下移动 是整数
oBox.style.top=oBox.offsetTop+100+'px';
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
执行以上代码后,我么能通过键盘上的上下左右按键控制盒子的移动
下面是通过回车键提交表单里面的留言 和通过ctrl键加Enter键提交留言
第一个通过回车提交留言
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>回车提交留言</title>
<style type="text/css">
*{margin: 0;padding: 0; font-size: 14px; color: #FF0000;}
input{display: block; margin: 0 auto; width: 400px; height: 20px; background: aquamarine; border: 1px solid orangered;}
textarea{display: block; background: #f5f5f5; margin: 0 auto; width: 400px; height: 200px;}
</style>
<script type="text/javascript">
//网页文档内 键盘任意键按下执行 右边的函数 ev形参 向非IE浏览器返回一个值
document.οnkeydοwn=function (ev){
//兼容性处理 ev兼容火狐 谷歌 || event兼容IE浏览器
var oEvent=ev||event;
//通过IE获取元素
var oTxt=document.getElementById('txt1');
var oBox=document.getElementById('txt2');
//当键盘按下的值是 13时
if (oEvent.keyCode==13) {
//让文本域的值 等于文本框的值 加换行 += 是 oBox.value=oBox.value+oTxt.value 保留原本的值加上现在提交的值
oBox.value+=oTxt.value+'\n';
//每次提交完后 清空文本框的内容
oTxt.value='';
}
};
</script>
</head>
<body>
<input type="text" name="txt1" id="txt1"/>
<textarea id="txt2"></textarea>
</body>
</html>
只能按住Ctrl加Enter键 提交回复<js代码如下>
<script type="text/javascript">
//网页文档内 键盘任意键按下执行 右边的函数 ev形参 向非IE浏览器返回一个值
document.οnkeydοwn=function (ev){
//兼容性处理 ev兼容火狐 谷歌 || event兼容IE浏览器
var oEvent=ev||event;
//通过IE获取元素
var oTxt=document.getElementById('txt1');
var oBox=document.getElementById('txt2');
//当键盘按下的值是 13时
if (oEvent.keyCode==13 && oEvent.<span style="color:#ff0000;">ctrlKey</span>) { //&&与 满足两边的条件 才执行下面代码 ctrlKey <代表<span style="color:#3366ff;">Ctrl</span>键>
//让文本域的值 等于文本框的值 加换行 += 是 oBox.value=oBox.value+oTxt.value 保留原本的值加上现在提交的值
oBox.value+=oTxt.value+'\n';
//每次提交完后 清空文本框的内容
oTxt.value='';
}
};
</script>
ctrlKey、 shiftKey、 altKey 三个事件 ctrlKey 代表 Ctrl键 shiftKey 代表 Shift键 altKey 代表 Alt键