js事件：分类和介绍

最新推荐文章于 2023-04-25 14:22:47 发布
最新推荐文章于 2023-04-25 14:22:47 发布
阅读量257 收藏
点赞数 1
分类专栏： WEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/q7786802/article/details/52799453
版权

1、event对象

l 用来获取事件的详细信息：鼠标位置、键盘按键
l 例子：获取鼠标位置： clientX
l document 的本质： document.childNodes [0]. tagName
<script>
window.onload=function()
{
alert(document.childNodes[1].tagName);
};
</script>

2、获取event对象(兼容性写法)

l var   oEvent = ev ||event ;
<script>
window.onload=function() {
document.onclick=function(ev) {
//IE
//alert(event.clientX+','+event.clientY);
//FF
//alert(ev.clientX+','+ev.clientY);
var oEvent=ev||event;
alert(oEvent.clientX+','+oEvent.clientY);
};
};
</script>

3、冒泡事件

l树层级里，有一个元素事件被触发了，那么它上层相同的事件，也会被一并触发。 
     
     

      
      

       
       <!DOCTYPE HTML>
      
      

      
      

       
       <html onclick="alert('html');">
      
      

      
      

       
       <head>
      
      

      
      

       
       <meta charset="utf-8">
      
      

      
      

       
       <title>无标题文档</title>
      
      

      
      

       
       <style>
      
      

      
      

       
       div {padding:100px;}
      
      

      
      

       
       </style>
      
      

      
      

       
       </head>
      
      

      
      

       
        
      
      

      
      

       
       <body onclick="alert('body');">
      
      

      
      

       
       <div style="background:#CCC;" onclick="alert(this.style.background);">
      
      

      
      

       
       	<div style="background:green;" onclick="alert(this.style.background);">
      
      

      
      

       
           	<div style="background:red;" onclick="alert(this.style.background);">
      
      

      
      

       
               </div>
      
      

      
      

       
           </div>
      
      

      
      

       
       </div>
      
      

      
      

       
       </body>
      
      

      
      

       
       </html>
l取消冒泡：oEvent.cancelBubble=true 
    
    

     
     

      
      <!DOCTYPE HTML>
     
     

     
     

      
      <html>
     
     

     
     

      
      <head>
     
     

     
     

      
      <meta charset="utf-8">
     
     

     
     

      
      <title>无标题文档</title>
     
     

     
     

      
      <style>
     
     

     
     

      
      #div1 {width:400px; height:300px; background:#CCC; display:none;}
     
     

     
     

      
      </style>
     
     

     
     

      
      <script>
     
     

     
     

      
      window.onload=function ()
     
     

     
     

      
      {
     
     

     
     

      
      	var oBtn=document.getElementById('btn1');
     
     

     
     

      
      	var oDiv=document.getElementById('div1');
     
     

     
     

      
      	
     
     

     
     

      
      	oBtn.onclick=function (ev)
     
     

     
     

      
      	{
     
     

     
     

      
      		var oEvent=ev||event;
     
     

     
     

      
      		
     
     

     
     

      
      		oDiv.style.display='block';
     
     

     
     

      
      		//alert('按钮被点击了');
     
     

     
     

      
      		
     
     

     
     

      
      		oEvent.cancelBubble=true;
     
     

     
     

      
      	};
     
     

     
     

      
      	
     
     

     
     

      
      	document.onclick=function ()
     
     

     
     

      
      	{
     
     

     
     

      
      		oDiv.style.display='none';
     
     

     
     

      
      		//alert('document被点击了');
     
     

     
     

      
      	};
     
     

     
     

      
      };
     
     

     
     

      
      </script>
     
     

     
     

      
      </head>
     
     

     
     

      
       
     
     

     
     

      
      <body>
     
     

     
     

      
      <input id="btn1" type="button" value="显示" />
     
     

     
     

      
      <div id="div1">
     
     

     
     

      
      </div>
     
     

     
     

      
      </body>
     
     

     
     

      
      </html>

4、鼠标事件

l 可视区位置： clientX 、 clientY
l onmousemove 鼠标移动时
 l onmousemove 鼠标按下时
lonmouseup 鼠标抬起时
loncontextmenu 鼠标右键时
用这个方法，我们做个小例子 
     
     

      
      

       
       <!DOCTYPE HTML>
      
      

      
      

       
       <html>
      
      

      
      

       
       <head>
      
      

      
      

       
       <meta charset="utf-8">
      
      

      
      

       
       <title>无标题文档</title>
      
      

      
      

       
       <style>
      
      

      
      

       
       div {width:10px; height:10px; background:red; position:absolute;}
      
      

      
      

       
       </style>
      
      

      
      

       
       <script>
      
      

      
      

       
       function getPos(ev)
      
      

      
      

       
       {
      
      

      
      

       
       	var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
      
      

      
      

       
       	var scrollLeft=document.documentElement.scrollLeft||document.body.scrollLeft;
      
      

      
      

       
       	
      
      

      
      

       
       	return {x: ev.clientX+scrollLeft, y: ev.clientY+scrollTop};
      
      

      
      

       
       }
      
      

      
      

       
        
      
      

      
      

       
       document.onmousemove=function (ev)
      
      

      
      

       
       {
      
      

      
      

       
       	var aDiv=document.getElementsByTagName('div');
      
      

      
      

       
       	var oEvent=ev||event;
      
      

      
      

       
       	
      
      

      
      

       
       	var pos=getPos(oEvent);
      
      

      
      

       
       	
      
      

      
      

       
       	for(var i=aDiv.length-1;i>0;i--)
      
      

      
      

       
       	{
      
      

      
      

       
       		aDiv[i].style.left=aDiv[i-1].offsetLeft+'px';
      
      

      
      

       
       		aDiv[i].style.top=aDiv[i-1].offsetTop+'px';
      
      

      
      

       
       	}
      
      

      
      

       
       	
      
      

      
      

       
       	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>
      
      

      
      

       
       </body>
      
      

      
      

       
       </html>

5、键盘事件

l keyCode
l 获取用户按下键盘的哪个按键
弹出键盘的键值： 
      
      

       
       

        
        <script>
       
       

       
       

        
        document.onkeydown=function (ev)
       
       

       
       

        
        {
       
       

       
       

        
        	var oEvent=ev||event;
       
       

       
       

        
        	
       
       

       
       

        
        	alert(oEvent.keyCode);
       
       

       
       

        
        };
       
       

       
       

        
        </script>

l 例子：键盘控制 Div 移 动
<!DOCTYPE HTML>
<html>
<head>
<metacharset="utf-8">
<title>无标题文档</title>
<style>
#div1 {width:100px; height:100px; background:#CCC; position:absolute;}
</style>
<script>
document.onkeydown=function(ev)
{
var oEvent=ev||event;
var oDiv=document.getElementById('div1');
if(oEvent.keyCode==37)
{
oDiv.style.left=oDiv.offsetLeft-10+'px';
}
elseif(oEvent.keyCode==39)
{
oDiv.style.left=oDiv.offsetLeft+10+'px';
}
};
</script>
</head>
 
<body>
<divid="div1"></div>
</body>
</html>

l 其他属性
l ctrlKey 、 shiftKey 、 altKey
l 例子：提交留言 ctrl+ 回车 提交
提交留言版本：回车+ctrl  提交留言 
    
    

     
     

      
      <script>
     
     

     
     

      
      window.onload=function ()
     
     

     
     

      
      {
     
     

     
     

      
      	var oTxt1=document.getElementById('txt1');
     
     

     
     

      
      	var oTxt2=document.getElementById('txt2');
     
     

     
     

      
      	
     
     

     
     

      
      	oTxt1.onkeydown=function (ev)
     
     

     
     

      
      	{
     
     

     
     

      
      		var oEvent=ev||event;
     
     

     
     

      
      		
     
     

     
     

      
      		if(oEvent.keyCode==13 && oEvent.ctrlKey)
     
     

     
     

      
      		{
     
     

     
     

      
      			oTxt2.value+=oTxt1.value+'\n';
     
     

     
     

      
      			oTxt1.value='';
     
     

     
     

      
      		}
     
     

     
     

      
      	};
     
     

     
     

      
      };
     
     

     
     

      
      </script>
李俊江
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS中包涵的事件分类
01-31
### JS中的事件分类详解 JavaScript（简称JS）作为前端开发的核心技术之一，广泛应用于网页交互设计与动态效果实现。为了更好地理解和应用JS事件，本文将详细介绍JS中的各种事件及其应用场景。 #### 1. 鼠标事件 ...
JavaScript中的事件类型
最新发布
Blueskyzhw的博客
11-20 1144
1. 鼠标事件（Mouse Events）：包括点击、双击、鼠标移入移出、鼠标按下释放等。2. 键盘事件（Keyboard Events）：包括按键按下、按键释放、按键组合等。6. 窗口事件（Window Events）：包括窗口打开、窗口关闭、窗口刷新等。5. 触摸事件（Touch Events）：包括触摸开始、触摸移动、触摸结束等。4. 焦点事件（Focus Events）：包括元素获得焦点、元素失去焦点等。3. 表单事件（Form Events）：包括表单提交、表单重置等。
JS中常用事件类型
qq_57804294的博客
04-25 149
JS中常用的事件类型
JS的事件类型（详解）
weixin_46726346的博客
06-02 2367
摘要 Web浏览器可能发生的事件有很多种类型，而这一篇我们针对于不同的浏览器的事件类型来说明一下，我们从DOM3级事件中总结了一下几种类型的事件： 事件 类型 作用意义 UI事件 当用户在页面上的元素进行交互时触发 焦点事件 当元素获得或失去焦点时触发 鼠标事件 当用户通过鼠标在页面上执行操作时触发 滚轮事件 当使用鼠标滚轮时触发 文本事件 当在文档中输入文本时触发 键盘事件 当用户通过键盘在页面上执行操作时触发 当然除了这些类型我们还有一些其他类型的事件，不过在这里
JS常用的事件类型
dachuichaobang的博客
04-09 1568
1. 常用的鼠标事件 click：单击鼠标左键触发 dblclick：双击鼠标左键触发 mousedown：鼠标按钮在元素上按下时触发 mouseout：鼠标指针移出一个元素边界时触发 mousemove：鼠标在某个元素上移动时持续触发 mouseup：松开鼠标按键时触发 mouseover：鼠标指针移到一个元素上时触发 mouseleave：鼠标离开元素时触发（只能离开目标元素时才触发） mouseenter：鼠标进入元素时触发（只能进入目标元素时才触发） 2. 常用的键盘事件 keydown：按下
Javascript的常见的事件类型
记录点点滴滴的成长。
09-08 1505
Javascript的事件详解
JavaScript模仿当当网首页剥离的36类商品分类JS菜单demo
05-19
本示例中的“JavaScript模仿当当网首页剥离的36类商品分类JS菜单demo”旨在帮助开发者理解如何用JavaScript实现一个功能完备、用户体验良好的商品分类导航系统。 首先，这个项目的核心在于利用JavaScript的DOM操作...
JavaScript键盘事件常见用法实例分析
10-17
主要介绍了JavaScript键盘事件常见用法,简单描述了javascript键盘事件的分类、功能,并结合实例形式给出了javascript响应键盘事件相关使用技巧,需要的朋友可以参考下
详解Vue2 无限级分类(添加,删除,修改)
08-31
作者首先介绍了如何使用 Vue.js 实现树形结构的分类，然后展示了如何使用 JavaScript 实现添加、删除、修改分类的功能。 知识点 1. Vue.js 是一个流行的前端框架，用于构建用户界面。 2. 无限级分类是指可以无限次...
突发事件数据
02-07
4. 数据可视化：使用JavaScript库如D3.js、Chart.js或Highcharts将数据可视化，创建地图、图表或仪表盘来直观展示突发事件的位置、趋势和影响。 5. 用户交互：实现用户界面的交互功能，如搜索、筛选和实时刷新。...
JS的事件介绍
热门推荐
cnds123的专栏
09-29 1万+
JS事件，就是用户或浏览器本身的某种行为，一般是用户对页面的一些动作引起的，例如，单击某个链接或按钮、在文本框中输入文本、按下键盘上的某个按键、移动鼠标等等。当事件发生时，您可以使用 JavaScript 中的事件处理程序（也可称为事件监听器）来检测并执行某些特定的程序。JS（JavaScript）与HTML 之间的交互是通过事件（event）实现的，或者说，事件是JavaScript和DOM之间进行交互的桥梁。 一般情况下事件的名称都是以单词on开头的，例如点击事件 onclick、页面加载事件 onl
JS中的事件归纳总结
w8789760的博客
04-01 1016
事件分为三类 鼠标事件 键盘事件 html事件 鼠标事件 鼠标的一切操作都是鼠标事件 点击 移动 滚轮 键盘事件 一般操作是给整体加 onkeydown键盘按下 onkeyup键盘弹起 onkeypress按下之后弹起之前 html的事件 页面加载事件 默认触发的 执行一次
JS事件汇总
von_ming的博客
06-29 4715
1. js事件 1.1 onclick 点击事件 1.2 onload 用户进入某个页面的时候触发（onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。）
JavaScript 中的事件分类
kllo__的博客
02-11 201
DOM 元素可以触发多种类型的事件。以下是主要事件类别。 类别 例子 键盘事件 按下或释放一个键 鼠标事件 按下或释放一个键 窗口事件 加载或关闭网页、调整大小、滚动 表单时间 更改表单字段的焦点，提交表单 每个事件都和一个事件对象相关联，该对象具有属性（关于时间的信息）和方法（对事件进行操作的方法）。此对象可由处理函数使用。 与事件关联的对象的许多属性取决于事件 type。有些属性总是存在的，比如事件返回类型 type ...
Js、事件的分类和介绍
误人子弟是我成功的手段。
10-11 256
JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 Js常用事件： 1.鼠标事件： 点击：onclick 经过(悬停)：onmouseover 离开：onmouseout 移动：onmousemove 2.键盘事件：onkeydown 3.页面事件(窗口事件)： 载入：window.onload 滚动：window
一些JS中的事件分类案例
weixin_42306555的博客
05-30 563
首先把常用的几个事件列举如下点击相关的： 单击： onclick 双击： ondblclick 焦点相关的： 聚焦：  onfocus 失去焦点： onblur 选项相关的： 改变选项： onchange 鼠标相关的： 鼠标经过： onmouseover 鼠标移除： onmouseout 页面加载相关的： 页面加载： onload  这个事件是在加载完标签后再触发。...
js事件的分类和介绍
whqwyn的博客
10-11 303
一、事件简介JavaScript 使我们有能力创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发JavaScript函数的事件。比方说，我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。二、事件举例和分类1、下面我就列出一些常见的事件onclick——————–鼠标点击 ondblclick—
JS中的事件分类
weixin_33885253的博客
10-24 85
1、鼠标事件onclick、ondblclick、onmouseover、onmouseout、onmousedown、onmouseup、onmousemove 2、HTML事件 onload、onscoll、onsubmit、onchange、onfoucs 3、键盘事件 keydown: 键盘按下时触发 keypre...
js事件分类（鼠标、键盘、文本、其它、特殊事件）、事件的3种绑定方式和对应解除方式、自定义事件、事件冒泡和捕获、事件属性（源事件、鼠标事件属性、按键事件属性）、事件方法。
AIWWY的博客
04-13 1552
目录 事件分类 鼠标事件 click mousedown mouseup mousemove contextmenu mouseover/mouseenter mouseout/mouseleave 键盘事件 keydown keypress keyup 文本事件 input change focus blur select reset submit 其它事件 scroll load unload error resize touchstart（移动端
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值