JavaScript：事件类型

最新推荐文章于 2023-11-20 16:42:15 发布
最新推荐文章于 2023-11-20 16:42:15 发布
阅读量1k 收藏
点赞数
分类专栏： JavaScript JavaScript 文章标签： 事件类型 HTML事件 DOM0级事件 DOM2级事件 IE事件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_27626333/article/details/51585399
版权

 我们把事件分为了三大类，分别是一般事件、表单事件和页面事件。当前我们可以再做细分：

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" οnlοad="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.οnlοad=drag;
function drag(){
   var oTitle=getByClass('login_logo_webqq','loginPanel')[0];//取元素数组的第一个
   // 拖曳
   oTitle.οnmοusedοwn=fnDown;
   // 关闭
   var oClose=document.getElementById('ui_boxyClose');
   oClose.οnclick=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.οnclick=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].οnmοuseοver=function(){
      	this.style.background='#567';
      }
      lis[i].οnmοuseοut=function(){
      	this.style.background='#FFF';
      }
      lis[i].οnclick=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.οnclick=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.οnmοusemοve=function(event){
  	event = event || window.event;
  	fnMove(event,disX,disY);
  }
  // 释放鼠标
  document.οnmοuseup=function(){
  	document.οnmοusemοve=null;
  	document.οnmοuseup=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.οnlοad=function(){
    var play=document.getElementById('play'),
        stop=document.getElementById('stop');

    // 开始抽奖
    play.οnclick=playFun;
    stop.οnclick=stopFun;

   // 键盘事件
   document.οnkeyup=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事件、设备事件、触摸事件、手势事件等各种事件，在后面我们再详细介绍。

A_山水子农
关注
专栏目录
JavaScript 事件类型
weixin_47782618的博客
05-01 1402
1. 鼠标事件 鼠标事件指与鼠标相关的事件。 1.1 鼠标事件的类型 2. 键盘事件 3. 表单事件 4. 窗口事件 5. 焦点事件 6. 剪切板事件 7. 网页状态事件 8. Touch事件
JavaScript：异步编程：回调函数与Promise
最新发布
07-14
JavaScript支持以下几种基本的数据类型： - `undefined`：表示未定义的值。 - `null`：表示空或没有任何值的对象。 - `boolean`：布尔型，值为`true`或`false`。 - `number`：数值型，包括整数和浮点数。 - `bigint...
JavaScript事件类型
weixin_30814223的博客
12-07 140
JavaScript事件类型 　　Web浏览器中可能发生的事件有很多类型。这里我将主要将下面几种常用的事件类型： UI事件 焦点事件 鼠标与滚轮事件 键盘与文本事件 复合事件 变动事件 HTML5事件 设备事件 触摸与手势事件 　　 第一部分：UI事件 　　UI事件中UI即(User Interface,用户界面)，当用户与页面桑拿的元素交互时触发。 　　UI事...
JavaScript中的事件类型
Blueskyzhw的博客
11-20 1266
1. 鼠标事件（Mouse Events）：包括点击、双击、鼠标移入移出、鼠标按下释放等。2. 键盘事件（Keyboard Events）：包括按键按下、按键释放、按键组合等。6. 窗口事件（Window Events）：包括窗口打开、窗口关闭、窗口刷新等。5. 触摸事件（Touch Events）：包括触摸开始、触摸移动、触摸结束等。4. 焦点事件（Focus Events）：包括元素获得焦点、元素失去焦点等。3. 表单事件（Form Events）：包括表单提交、表单重置等。
javascript事件类型大全
前端工程师，博文都是自己学习到的，或者开发中遇到的点，记录一下
04-09 875
键盘事件 onkeydown：按下某个键就会触发 onkeyup：释放某个按键时触发 onkeypress：某个键按下或者按住时触发 鼠标事件 onclick：鼠标单击时触发 ondbclick：鼠标左击时触发 ondblclick：鼠标双击事件 onmousedown：单击任意一个鼠标按键时触发 onmouseout：鼠标指针移出一个元素时触发 onmousemove：鼠标指针在某个元素上移动时触发 onmouseup：松开鼠标任意一个按键时触发 onmouseover：鼠标指针移动到一个元素时触发
头歌教学实践平台 Web前端开发基础 JavaScript学习手册十五：事件处理
01-20
在事件处理函数中，会有一个`event`对象自动传递进来，它包含了与事件相关的各种信息，如事件类型、目标元素、鼠标位置等。 4. **事件冒泡和事件捕获**： - **事件冒泡**：事件从最深的节点开始，逐级向上层节点...
Javascript简介：Alura-JavaScript：网络编程和语言
02-18
1. **基础语法**：JavaScript是一种弱类型、解释型的语言，支持函数式、面向对象和命令式编程风格。变量声明使用`var`、`let`或`const`，数据类型包括基本类型（如字符串、数字、布尔值、null和undefined）和引用...
JavaScript：Curso完成JavaScript
02-12
- 变量与数据类型：了解JavaScript中的var、let和const关键字，以及基本数据类型（如数字、字符串、布尔值、null、undefined）。 - 运算符：学习算术、比较、逻辑和位运算符，理解它们在代码中的作用。 - 控制流...
JavaScript：我JavaScript存储库
02-23
5. **事件驱动**：JavaScript常用于Web开发，通过事件监听和处理机制来响应用户的交互。 6. **异步编程**：JavaScript使用回调函数、Promise和async/await等机制来处理非阻塞的异步操作，这对于优化Web应用性能至关...
JS事件的几种类型
weixin_46421045的博客
06-10 271
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { width: 200px;
JavaScript事件的分类和介绍
周秦卿的博客
10-11 1713
1、关于事件           在我们使用JavaScript编写脚本语言时,会发现我们会常常用到各种事件,如简单的单击事件onclick (通过鼠标点击触发事件),   onkeydown(键盘事件 按下键盘上任意健值触发)等等, 通过对这些事件的设置,javascript可以触发网页中设置好的事件, 事件的触发可以是用户的行为,也可以是浏览器的行为 事件通常有这几种案例, 元素被点击时,
JS中事件类型
Listner的博客
02-01 734
在页面运行中，通过触发特定元素的事件类型，可以触发该事件的绑定函数 通用的事件类型有： onload 当页面加载完成时触发 window.onload = function(){} 当页面加载完成后用此方法包裹所有的内联js代码，可以解决js获取html标签时还未加载的情况，同时提高用户体验 onblur 失去焦点时触发 标签名.onblur = function( ){ } onfoc...
Javascript的常见的事件类型
记录点点滴滴的成长。
09-08 1651
Javascript的事件详解
js基本事件类型
cheng_cuo_tuo的博客
01-29 1853
&lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt; &lt;title&gt;无标题文档&lt;/title&gt; &lt;script&gt; /* 基本事件模型处理方式是被广泛使用到浏览器中的。 基本事件处理模型的形式主要通过事件属性来设计的。 事件属性
[js] JavaScript常见的事件类型
qq_14993591的博客
09-08 336
浏览器的事件类型 window 绑定的 scroll 页面滚动监听事件 resize 视窗窗口大小监听事件 load html加载事件 DOM操作 标签绑定的事件 点击类 click 鼠标左键单击 dblclick 鼠标左键双击 contextmenu 鼠标右键单击
JavaScript事件类型总结
止水Itachi
04-09 155
JavaScript事件 用户的行为包括：onclick、ondblclick、onfocus、onblur、window.onload ​ 是用户跟页面的交互，当用户跟页面进行一些“交流”的时候，页面通过js就会触发一些事件，比如鼠标点击的时候就会触发onclick事件，给这个事件绑定一个函数，那么这个时候函数就会被调用，代码就会被执行 事件类型： ​ 鼠标事件包括：cl...
JS常用的事件类型
dachuichaobang的博客
04-09 1577
1. 常用的鼠标事件 click：单击鼠标左键触发 dblclick：双击鼠标左键触发 mousedown：鼠标按钮在元素上按下时触发 mouseout：鼠标指针移出一个元素边界时触发 mousemove：鼠标在某个元素上移动时持续触发 mouseup：松开鼠标按键时触发 mouseover：鼠标指针移到一个元素上时触发 mouseleave：鼠标离开元素时触发（只能离开目标元素时才触发） mouseenter：鼠标进入元素时触发（只能进入目标元素时才触发） 2. 常用的键盘事件 keydown：按下
实用JS系列——事件类型
weixin_30846599的博客
01-29 73
事件就是用户对窗口上各种组件的操作。JS中的事件中的事件即由访问Web页面的用户引起的一系列的操作。一般用于浏览器和用户操作进行交互，例如：用户的单击事件等。 类型分为： 内联模型、脚本模型和DOM2模型。 1、内联模型 先看两个内联模型的例子： //示例1 <input type="button" id="button1" value="T...
深入理解JavaScript：核心类型与事件处理
笔记中详细讲解了JavaScript的特性、使用场景、事件处理、数据类型、类型查询函数以及内置对象的使用。" 在JavaScript中，语言的核心特性是它被解释执行，这意味着代码在运行时逐行被解析和执行，而不是像编译型...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值