javascript事件处理中Event对象（键盘事件和鼠标事件）实例

最新推荐文章于 2021-07-19 10:41:20 发布
最新推荐文章于 2021-07-19 10:41:20 发布
阅读量2.1k 收藏
点赞数 1
分类专栏： javaScript 文章标签： javascript html 事件监听
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yayun0516/article/details/41643459
版权

.html代码如下：

<!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">
<title>辅助键及鼠标</title>
<style type="text/css">
*{margin:0}
#layer{width:100px;height:30px;position:relative;float:left;line-height:30px}
</style>
<script type="text/javascript">
	function changeColor(){
		if(event.altKey){
			document.getElementById('layer').style.backgroundColor='red';
		}
	}
	<span style="color:#ff0000;">document.onkeydown = changeColor;//很重要</span>
	function mouseDown(){
		if(event.button == 1){
			document.getElementById('layer').style.backgroundColor='red';
		}else if(event.button == 2){
			document.getElementById('layer').style.backgroundColor='green';
		}else{
			document.getElementById('layer').style.backgroundColor='blue';
		}
	}
	<span style="color:#ff0000;">document.onmousedown = mouseDown;</span>
</script>
</head>
<body>

	<div id="layer" ><span id="test">吕布信息介绍</span>
	</div>
	
</body>
</html>
具体效果可以自行测试

示例如下：

<!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">
<title>辅助键及鼠标</title>
<style type="text/css">
	*{margin:0}
	#layer{width:100px;height:30px;position:relative;float:left;line-height:30px}
	#test{
		width:500px;
		height:300px;
		background:#fba;
	}
</style>
<script type="text/javascript">
	function getLoc(){
		var obj = document.getElementById('layer');
		obj.innerText = "clientx="+event.clientX+"x="+event.x+"screenX"+event.screenX;
		
		
		
	}
	<span style="color:#ff0000;">document.onmousemove = getLoc;</span>
	
	
</script>
</head>
<body οnlοad="init()" >
	<div id="test"></div>
	<div id="layer" ></div>
</body>
</html>
显示效果如下：

查看进入元素的tagName

.html代码如下：

<!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">
<title>辅助键及鼠标</title>
<style type="text/css">
	*{margin:0}
	#layer{width:100px;height:30px;position:relative;float:left;line-height:30px}
	#test{
		width:500px;
		height:300px;
		background:#fba;
	}
</style>
<script type="text/javascript">
	function getLoc(){
		var obj = document.getElementById('layer');
		obj.innerText = "clientx="+event.clientX+"x="+event.x+"screenX"+event.screenX;
		obj.innerText = event.toElement.tagName;
		
		
	}
	
		document.onmouseover = getLoc;
		
	
</script>
</head>
<body οnlοad="init()" >
	<div id="test"></div>
	<div id="layer" ></div>
</body>
</html>

鼠标进入的时候显示DIV，移出的时候显示HTML

键盘监听事件：

.html 代码如下：

<!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">
<title>辅助键及鼠标</title>
<style type="text/css">
	*{margin:0}
	#layer{width:100px;height:30px;position:relative;float:left;line-height:30px}
	#test{
		width:500px;
		height:300px;
		background:#fba;
	}
</style>
<script type="text/javascript">
	function getLoc(){
		var obj = document.getElementById('layer');
		
		obj.innerText = String.fromCharCode(event.keyCode);
		
	}
	
	function init(){
		
		document.onkeydown = getLoc;
	}
</script>
</head>
<body οnlοad="init()" >
	<div id="test"></div>
	<div id="layer" ></div>
</body>
</html>
按下键盘就会显示当前按键



yayun0516
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
鼠标及键盘监听实现
05-09
该项目代码用于实现鼠标动作及键盘事件的监听。可单独监听鼠标事件或键盘事件。
js鼠标按键事件和键盘按键事件用法实例汇总
11-25
在本文中，我们将深入探讨JavaScript中的鼠标按键事件和键盘按键事件，并通过实例来阐述它们的使用方法。 首先，我们来看键盘事件。JavaScript中有三个主要的键盘事件： 1. `keydown`：当用户按下键盘上的一个键时...
Js-三大事件（鼠标事件、键盘事件、html事件）
blog_zxb的博客
03-31 631
鼠标事件click：单击dblclick：双击mousedown：鼠标按下mouseup：鼠标抬起mouseover：鼠标悬浮mouseout：鼠标离开mousemove：鼠标移动mouseenter：鼠标进入mouseleave：鼠标离开[html] view plain copy &lt;button onclick="myClick()"&gt;鼠标单击&lt;/button&gt;  &l...
鼠标和键盘的事件监听
blacop的博客
08-04 647
//鼠标和键盘的事件监听 import java.awt.* import java.awt.event.*;class MouseAndKeyEvent { private Frame f;//定义该图形中所需的组件的引用 private Button but;//按钮 private TextField tf;//文本框 MouseAndKeyEvent ()//构
Event事件之键盘事件
zzzzz周绍辉的博客
07-23 1555
1. onkeydown在用户按下一个键盘按键时发生提示与 onkeydown 事件相关联的事件触发次序: 1. onkeydown 2. onkeypress 3. onkeyupHTML标签支持除了 ：<base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, 和 <title>以外，
JS:事件鼠标处理机制
海生的博客
08-03 836
鼠标移入移出事件流程： 鼠标移动到目标元素上时会触发mouseover 事件， 如果继续在目标元素上移动会不断触发mousemove事件， 鼠标移出元素的那一刻，触发mouseout事件 其他鼠标事件： scroll ：目标元素的滚动条发生移动时(滚动滚轮/拖动滚动条。。) mousewheel：滚动滚轮触发，这个和scroll事件需要区别开来。  mousedo
JavaScript事件学习小结（三）js事件对象
11-23
在IE中，虽然事件处理函数也可以通过`event`参数访问事件对象，但这个`event`不是同一个引用，而是与`window.event`不同。例如： ```javascript var btn = document.getElementById("btn"); btn.onclick = ...
JS的Event事件对象使用方法
12-02
在JavaScript中，Event事件对象是处理用户交互和浏览器行为的核心组成部分。它包含了与特定事件相关的所有信息，如鼠标点击、键盘按键或者页面加载等。理解并熟练使用Event对象是每个前端开发者必备的技能之一。本篇...
2.01 JavaScript基础事件以及Event对象（原生态）.pdf
最新发布
10-27
本文将详细介绍 JavaScript 中的基础事件和 Event 对象，包括事件的定义、EventTarget 接收事件接口、addEventListener、removeEventListener、dispatchEvent 方法 serta JavaScript 中常用的事件等。 事件的定义 -...
jQuery事件绑定和委托实例
11-30
它可以接受事件类型、选择器和处理函数作为参数，精确地移除所需事件。 ```javascript var foo = function () { // code to handle some kind of event }; // … now foo will be called when paragraphs are ...
事件（鼠标事件、事件处理模型、事件对象）
巧克力很苦的小博客
09-06 1026
鼠标事件 鼠标点击左键 并且鼠标抬起时触发 var oBox = document.getElementById('box'); oBox.onclick = function(){//DOM0级事件 console.log('我被点击了'); }; 鼠标右键点击了6下 鼠标的任意键在按下时会触发 var oBox = document.g...
鼠标事件 事件对象
lishundi的博客
08-10 548
事件对象：事件在浏览器中是以对象的形式存在的，触发一个事件，就会产生一个事件对象event，该对象包含所有与事件相关的信息，鼠标操作产生的event中会包含鼠标位置的信息，键盘操作产生的event中会包含与按下的键有关的信息。 （1）clientX()   当前鼠标事件发生时鼠标和可视区域左侧的距离 (2)clientY()  当前鼠标事件发生时鼠标和可视区域顶部的距离 (3)offsetX...
常用的鼠标事件（event）
又一个四季在轮回
03-16 1309
常见的鼠标事件 client：相对于浏览器可视区的坐标。（能看见的范围，无论你如何下拉翻页） page：相对于整个文档。即相对于整个页面的x，y轴坐标（距离） screen：相对于整个电脑屏幕的坐标 实现图片跟图片一起移动功能 onmousemove：鼠标移动 注意：一定不要忘了位置的单位 <head> <meta charset="UTF-8"> &l...
[前端] 键盘事件常用操作
网站前端/PHP/Android/其他
06-04 1865
网页中有些操作是需要键盘事件的，如点击 enter 键 实现登录 等。 操作对象：document文档对象 window窗体对象 html标签元素 body标签元素 都可以 事件方法： keydown keyup keypress 触发键盘事件：e.keycode $(document).keydown(function(e) { conso...
js知识点02
qq1424035130的博客
12-04 115
事件的总结： 焦点事件：onblur、onfocus 表单事件：submit、onchange 页面加载事件：onload 鼠标事件：onclick
JS DOM 常用节点操作 (下）
Ares5k
07-19 293
JS DOM 事件注册、事件删除、事件捕获、事件冒泡
js 获取鼠标位置
huolan__34的博客
12-27 2397
在JavaScript中，当事件发生时，获取鼠标的位置是件很重要的事件。由于浏览器的不兼容性，不同浏览器分别在各自事件对象中定义了不同的属性，说明如下表所示。这些属性都是以像素值定义了鼠标指针的坐标，但是由于它们参照的坐标系不同，导致精确计算鼠标的位置比较麻烦。 属性及其兼容性 属性 说明 兼容性 clientX 以浏览器窗口左上顶角为原点，定位 x 轴坐标 ...
JavaScript中的鼠标事件及事件对象
zw06121的博客
08-19 1726
1. 鼠标事件 mouseover和mouseout 当鼠标进入元素区域内触发和离开元素区域内触发 这两个事件是冒泡的,就是当前事件会冒泡给父元素,一层一层冒泡 mouseenter和mouseleave 与mouseover和mouseout效果一致,但是这两个事件不冒泡 2. 事件对象的属性 2.1 常用属性 bubble 返回的是布尔值,表示...
JavaScript中的Event事件对象详解
热门推荐
沐枫
10-07 1万+
JavaScript事件【event】 在JavaScript中对于事件来讲，首先，我们需要了解这样几个概念：事件、事件类型、事件绑定、事件监听、事件处理程序(事件侦听器)、事件对象(事件源)、事件流、事件冒泡、事件捕获、事件性能优化（事件委托[事件代理]、移除事件处理程序）、浏览器内核（常见的浏览器兼容问题）等。 什么是事件(event)： 注：其实事件一直都是存在的（不管有没有绑定...
JavaScript事件模型：Event对象详解与事件流
在JavaScript中，我们可以通过不同的方式获取和处理这些事件。 首先，事件模型分为两种主要类型：DOM事件模型和IE专有事件模型。在DOM Level 1中并没有包含完整的事件模型，而在Level 2和Level 3中，事件模型逐渐...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值