JavaScript：事件类型
2016-06-04 17:56
615 查看
我们把事件分为了三大类，分别是一般事件、表单事件和页面事件。当前我们可以再做细分：
1、UI事件：如load、unload、error、resize、scroll、select、DOMActive，是用户与页面上的元素交互时触发的。
（1）、load事件
在创建新的<img>元素时，可以为其制定一个事件处理程序，以便图像加载完毕后给出提示，此时，最重要的是要在指定src属性之前先指定事件，例如：
注意：新图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。
<script>元素也会触发load事件，以便开发人员确定动态加载的JavaScript文件是否加载完毕。与图像不同，只有在设置了<script>元素的src属性并将该元素添加到文档后，才会开始下载JavaScript文件。
IE和Opera还支持<link>元素上的load事件，以便开发人员确定样式表是否加载完毕。
（2）、onload事件：在文档被完全卸载后触发。
（3）、resize事件：当浏览器窗口被调整到一个新的高度或者宽度是，就会触发resize事件。
（4）、scroll事件：虽然scroll事件是在window对象发生的，但它实际表示的则是页面中相应元素的变化。
2、焦点事件：如blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout，在元素获得或失去焦点的时候触发，这些事件当中，最为重要的是blur和focus，有一点需要引起注意，这一类事件不会发生冒泡！
3、鼠标与滚轮事件：如click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup，是当用户通过鼠标在页面执行操作时所触发的。下面是拖放实例的js：
//封装通过class获取元素的方法，getELementsByClassName()的方法在IE中只有IE9+才支持。
//clsName是必须的，parent是可选的
function getByClass(clsName,parent){
var oParent=parent?document.getElementById(parent):document,
eles=[],
elements=oParent.getElementsByTagName('*');//获取整个页面中的所有元素
for(var i=0,l=elements.length;i<l;i++){
if(elements[i].className==clsName){//判断元素的class名是否相等
eles.push(elements[i]);
}
}
return eles;//返回一个元素数组
}
window.onload=drag;
function drag(){
var oTitle=getByClass('login_logo_webqq','loginPanel')[0];//取元素数组的第一个
// 拖曳
oTitle.onmousedown=fnDown;
// 关闭
var oClose=document.getElementById('ui_boxyClose');
oClose.onclick=function(){
document.getElementById('loginPanel').style.display='none';
}
// 切换状态
var loginState=document.getElementById('loginState'),
stateList=document.getElementById('loginStatePanel'),
lis=stateList.getElementsByTagName('li'),
stateTxt=document.getElementById('login2qq_state_txt'),
loginStateShow=document.getElementById('loginStateShow');
loginState.onclick=function(e){
e = e || window.event;
//阻止事件冒泡，防止document.onclick发生
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
stateList.style.display='block';
}
// 鼠标滑过、离开和点击状态列表时
for(var i=0,l=lis.length;i<l;i++){
lis[i].onmouseover=function(){
this.style.background='#567';
}
lis[i].onmouseout=function(){
this.style.background='#FFF';
}
lis[i].onclick=function(e){
e = e || window.event;
//阻止冒泡，防止loginState.onclick发生
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
var id=this.id;
stateList.style.display='none';
stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;
loginStateShow.className='';
loginStateShow.className='login-state-show '+id;
}
}
//隐藏列表ul
document.onclick=function(){
stateList.style.display='none';
}
}
//鼠标跟随，需要获取光标位置
//鼠标事件都在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的clientX和clientY属性中
function fnDown(event){
event = event || window.event;
var oDrag=document.getElementById('loginPanel'),
// 光标按下时光标和面板之间的距离
disX=event.clientX-oDrag.offsetLeft,
disY=event.clientY-oDrag.offsetTop;
// 移动
document.onmousemove=function(event){
event = event || window.event;
fnMove(event,disX,disY);
}
// 释放鼠标
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
function fnMove(e,posX,posY){
var oDrag=document.getElementById('loginPanel'),
l=e.clientX-posX,
t=e.clientY-posY,
//防止脱出窗外
winW=document.documentElement.clientWidth || document.body.clientWidth,//窗口宽
winH=document.documentElement.clientHeight || document.body.clientHeight,//窗口高
maxW=winW-oDrag.offsetWidth-10,//活动最大宽度；其中减去10是因为关闭按钮的样式有个right:-10px;
maxH=winH-oDrag.offsetHeight;//活动最大高度
if(l<0){
l=0;//防止左脱出
}else if(l>maxW){
l=maxW;//防止右脱出
}
if(t<0){
t=10;//防止上脱出；t等于10是因为关闭按钮的样式有个top:-10px;
}else if(t>maxH){
t=maxH;//防止下脱出
}
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
}
4、滚轮事件：mousewheel（IE6+均支持）、DOMMouseScroll（FF支持的，与mousewheel效果一样）。是使用鼠标滚轮时触发的。
5、文本事件：textInput，在文档中输入文本触发。
6、键盘事件：keydown、keyup、keypress，当用户通过键盘在页面中执行操作时触发。
keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
keyup：当用户释放键盘上的键时触发。
下面是抽奖实例：
<!doctype html>
<html>
<head>
<title>抽奖</title>
<meta charset="utf-8">
<style>
*{margin:0;
padding:0;}
.title{width:400px;
height:70px;
margin:0 auto;
padding-top:30px;
text-align:center;
font-size:24px;
font-weight:bold;
color:#F00;}
.btns{width:190px;
height:30px;
margin:0 auto;}
.btns span{display:block;
float:left;
width:80px;
height:27px;
line-height:27px;
background:#036;
border:1px solid #eee;
border-radius:7px;
margin-right:10px;
color:#FFF;
text-align:center;
font-size:14px;
font-family:"微软雅黑";
cursor:pointer;}
</style>
</head>
<body>
<div id="title" class="title">开始抽奖啦！</div>
<div class="btns">
<span id="play">开 始</span>
<span id="stop">停 止</span>
</div>
<script>
var data=['Phone5','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','50元充值卡','1000元超市购物券'],
timer=null,
flag=0;
window.onload=function(){
var play=document.getElementById('play'),
stop=document.getElementById('stop');
// 开始抽奖
play.onclick=playFun;
stop.onclick=stopFun;
// 键盘事件
document.onkeyup=function(event){
event = event || window.event;
if(event.keyCode==13){
if(flag==0){
playFun();
flag=1;
}else{
stopFun();
flag=0;
}
}
}
}
function playFun(){
var title=document.getElementById('title');
var play=document.getElementById('play');
//开始定时器之前需要清除定时器，防止同时多次点击触发多个定时器
//多个定时器同时运行的效果就是抽奖显示的结果越来越快。
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length);//随机数值为0-7
title.innerHTML=data[random];
},50);
play.style.background='#999';
}
function stopFun(){
clearInterval(timer);
var play=document.getElementById('play');
play.style.background='#036';
}
</script>
</body>
</html>
7、合成事件：DOM3级新增，用于处理IME的输入序列。所谓IME，指的是输入法编辑器，可以让用户输入在物理键盘上找不到的字符。compositionstart、compositionupdate、compositionend三种事件。
8、变动事件：DOMsubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified等，当底层DOM结构发生变化时触发。IE8-不支持。
9、变动名称事件：指的是当元素或者属性名变动时触发，当前已经弃用！
对于事件的基本类型，随着HTML5的出现和发展，又新增了HTML5事件、设备事件、触摸事件、手势事件等各种事件，在后面我们再详细介绍。
1、UI事件：如load、unload、error、resize、scroll、select、DOMActive，是用户与页面上的元素交互时触发的。
（1）、load事件
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件类型</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<center><input type="button" value="Click Me" id="myBtn"/></center><br />
<img src="7V5A54230.jpg" onload="alert('Image loaded')" id="myImage"/>
<script>
var image=document.getElementById("myImage");
EventUtil.addHandler(window,"load",function(event){
alert("Loaded!");
});
EventUtil.addHandler(image,"load",function(event){
event=EventUtil.getEvent(event);
var target=EventUtil.getTarget(event);
alert(target.src);
});
</script>
</body>
</html>在创建新的<img>元素时，可以为其制定一个事件处理程序，以便图像加载完毕后给出提示，此时，最重要的是要在指定src属性之前先指定事件，例如：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件类型</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<script>
EventUtil.addHandler(window,"load",function(){
var image=document.createElement("img");
EventUtil.addHandler(image,"load",function(event){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
document.body.appendChild(image);
image.src="7V5A54230.jpg";
});
</script>
</body>
</html>注意：新图像元素不一定要从添加到文档后才开始下载，只要设置了src属性就会开始下载。
<script>元素也会触发load事件，以便开发人员确定动态加载的JavaScript文件是否加载完毕。与图像不同，只有在设置了<script>元素的src属性并将该元素添加到文档后，才会开始下载JavaScript文件。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件类型</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<script>
EventUtil.addHandler(window,"load",function(){
var script=document.createElement("script");
EventUtil.addHandler(script,"load",function(event){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
script.src="jquery.js";
document.body.appendChild(script);
});
</script>
</body>
</html>IE和Opera还支持<link>元素上的load事件，以便开发人员确定样式表是否加载完毕。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>事件类型</title>
<script type="text/javascript" src="EventUtil.js"></script>
</head>
<body>
<script>
EventUtil.addHandler(window,"load",function(){
var link=document.createElement("link");
link.type="text/css";
link.rel="stylesheet";
EventUtil.addHandler(link,"load",function(event){
event=EventUtil.getEvent(event);
alert(EventUtil.getTarget(event).src);
});
link.href="example.css";
document.getElementsByTagName("head")[0].appendChild(link);
});
</script>
</body>
</html>（2）、onload事件：在文档被完全卸载后触发。
（3）、resize事件：当浏览器窗口被调整到一个新的高度或者宽度是，就会触发resize事件。
（4）、scroll事件：虽然scroll事件是在window对象发生的，但它实际表示的则是页面中相应元素的变化。
2、焦点事件：如blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout，在元素获得或失去焦点的时候触发，这些事件当中，最为重要的是blur和focus，有一点需要引起注意，这一类事件不会发生冒泡！
3、鼠标与滚轮事件：如click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup，是当用户通过鼠标在页面执行操作时所触发的。下面是拖放实例的js：
//封装通过class获取元素的方法，getELementsByClassName()的方法在IE中只有IE9+才支持。
//clsName是必须的，parent是可选的
function getByClass(clsName,parent){
var oParent=parent?document.getElementById(parent):document,
eles=[],
elements=oParent.getElementsByTagName('*');//获取整个页面中的所有元素
for(var i=0,l=elements.length;i<l;i++){
if(elements[i].className==clsName){//判断元素的class名是否相等
eles.push(elements[i]);
}
}
return eles;//返回一个元素数组
}
window.onload=drag;
function drag(){
var oTitle=getByClass('login_logo_webqq','loginPanel')[0];//取元素数组的第一个
// 拖曳
oTitle.onmousedown=fnDown;
// 关闭
var oClose=document.getElementById('ui_boxyClose');
oClose.onclick=function(){
document.getElementById('loginPanel').style.display='none';
}
// 切换状态
var loginState=document.getElementById('loginState'),
stateList=document.getElementById('loginStatePanel'),
lis=stateList.getElementsByTagName('li'),
stateTxt=document.getElementById('login2qq_state_txt'),
loginStateShow=document.getElementById('loginStateShow');
loginState.onclick=function(e){
e = e || window.event;
//阻止事件冒泡，防止document.onclick发生
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
stateList.style.display='block';
}
// 鼠标滑过、离开和点击状态列表时
for(var i=0,l=lis.length;i<l;i++){
lis[i].onmouseover=function(){
this.style.background='#567';
}
lis[i].onmouseout=function(){
this.style.background='#FFF';
}
lis[i].onclick=function(e){
e = e || window.event;
//阻止冒泡，防止loginState.onclick发生
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
}
var id=this.id;
stateList.style.display='none';
stateTxt.innerHTML=getByClass('stateSelect_text',id)[0].innerHTML;
loginStateShow.className='';
loginStateShow.className='login-state-show '+id;
}
}
//隐藏列表ul
document.onclick=function(){
stateList.style.display='none';
}
}
//鼠标跟随，需要获取光标位置
//鼠标事件都在浏览器视口中的特定位置上发生的。这个位置信息保存在事件对象的clientX和clientY属性中
function fnDown(event){
event = event || window.event;
var oDrag=document.getElementById('loginPanel'),
// 光标按下时光标和面板之间的距离
disX=event.clientX-oDrag.offsetLeft,
disY=event.clientY-oDrag.offsetTop;
// 移动
document.onmousemove=function(event){
event = event || window.event;
fnMove(event,disX,disY);
}
// 释放鼠标
document.onmouseup=function(){
document.onmousemove=null;
document.onmouseup=null;
}
}
function fnMove(e,posX,posY){
var oDrag=document.getElementById('loginPanel'),
l=e.clientX-posX,
t=e.clientY-posY,
//防止脱出窗外
winW=document.documentElement.clientWidth || document.body.clientWidth,//窗口宽
winH=document.documentElement.clientHeight || document.body.clientHeight,//窗口高
maxW=winW-oDrag.offsetWidth-10,//活动最大宽度；其中减去10是因为关闭按钮的样式有个right:-10px;
maxH=winH-oDrag.offsetHeight;//活动最大高度
if(l<0){
l=0;//防止左脱出
}else if(l>maxW){
l=maxW;//防止右脱出
}
if(t<0){
t=10;//防止上脱出；t等于10是因为关闭按钮的样式有个top:-10px;
}else if(t>maxH){
t=maxH;//防止下脱出
}
oDrag.style.left=l+'px';
oDrag.style.top=t+'px';
}
4、滚轮事件：mousewheel（IE6+均支持）、DOMMouseScroll（FF支持的，与mousewheel效果一样）。是使用鼠标滚轮时触发的。
5、文本事件：textInput，在文档中输入文本触发。
6、键盘事件：keydown、keyup、keypress，当用户通过键盘在页面中执行操作时触发。
keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。
keyup：当用户释放键盘上的键时触发。
下面是抽奖实例：
<!doctype html>
<html>
<head>
<title>抽奖</title>
<meta charset="utf-8">
<style>
*{margin:0;
padding:0;}
.title{width:400px;
height:70px;
margin:0 auto;
padding-top:30px;
text-align:center;
font-size:24px;
font-weight:bold;
color:#F00;}
.btns{width:190px;
height:30px;
margin:0 auto;}
.btns span{display:block;
float:left;
width:80px;
height:27px;
line-height:27px;
background:#036;
border:1px solid #eee;
border-radius:7px;
margin-right:10px;
color:#FFF;
text-align:center;
font-size:14px;
font-family:"微软雅黑";
cursor:pointer;}
</style>
</head>
<body>
<div id="title" class="title">开始抽奖啦！</div>
<div class="btns">
<span id="play">开 始</span>
<span id="stop">停 止</span>
</div>
<script>
var data=['Phone5','Ipad','三星笔记本','佳能相机','惠普打印机','谢谢参与','50元充值卡','1000元超市购物券'],
timer=null,
flag=0;
window.onload=function(){
var play=document.getElementById('play'),
stop=document.getElementById('stop');
// 开始抽奖
play.onclick=playFun;
stop.onclick=stopFun;
// 键盘事件
document.onkeyup=function(event){
event = event || window.event;
if(event.keyCode==13){
if(flag==0){
playFun();
flag=1;
}else{
stopFun();
flag=0;
}
}
}
}
function playFun(){
var title=document.getElementById('title');
var play=document.getElementById('play');
//开始定时器之前需要清除定时器，防止同时多次点击触发多个定时器
//多个定时器同时运行的效果就是抽奖显示的结果越来越快。
clearInterval(timer);
timer=setInterval(function(){
var random=Math.floor(Math.random()*data.length);//随机数值为0-7
title.innerHTML=data[random];
},50);
play.style.background='#999';
}
function stopFun(){
clearInterval(timer);
var play=document.getElementById('play');
play.style.background='#036';
}
</script>
</body>
</html>
7、合成事件：DOM3级新增，用于处理IME的输入序列。所谓IME，指的是输入法编辑器，可以让用户输入在物理键盘上找不到的字符。compositionstart、compositionupdate、compositionend三种事件。
8、变动事件：DOMsubtreeModified、DOMNodeInserted、DOMNodeRemoved、DOMAttrModified、DOMCharacterDataModified等，当底层DOM结构发生变化时触发。IE8-不支持。
9、变动名称事件：指的是当元素或者属性名变动时触发，当前已经弃用！
对于事件的基本类型，随着HTML5的出现和发展，又新增了HTML5事件、设备事件、触摸事件、手势事件等各种事件，在后面我们再详细介绍。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 抓取Js动态生成数据且以滚动页面方式分页的网页
- 抓取Js动态生成数据且以滚动页面方式分页的网页
- <Js>windows 尺寸
- <Js>RegExp
- <Js>Math
- <Js>Date
- <Js>String
- JavaScript分享新浪微博、QQ空间、腾讯微博
- JavaScript学习
- javascript 调用谷歌地图API 输入地址 点击弹出悬浮信息
- JavaScript学习笔记三：数组
- post发送JSON数据(字符串、数组、字典、自定义对象)给服务器
- 用js操作表格
- 注册的时候 输入框类用户名 密码 邮箱的判定
- 正则表达式 找邮箱
- 正则表达式 找手机号
- 网页右下角弹出信息框
- 分别用js和jq实现百度全选反选效果
- 页面评分操作
- JavaScript：事件对象