Javascript（三十八）事件对象和事件对象属性

最新推荐文章于 2023-02-02 19:45:02 发布
最新推荐文章于 2023-02-02 19:45:02 发布
阅读量320 收藏
点赞数
分类专栏： Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44730244/article/details/117434439
版权

事件对象

事件绑定“元素节点.on+事件类型=匿名函数

注：系统会在事件绑定一旦完成，生成一个事件对象

普通函数：声明->调用->执行。

function fn(){
				console.log(1)
			}
			fn()

事件处理函数：

var obtn=document.getElementsByTagName('button')[0]
			obtn.onclick=function(){
				console.log('事件处理函数')
			}

注：触发事件的时候，系统会自动去调用事件绑定的函数。将事件对象当作第一个参数传入

获取这个事件对象有两种方法：一种是利用argument[0]伪数组获取
在这里插入图片描述
另外一种是：直接在定义事件处理函数时，就把形参定义好。 （ 因为实参只有在函数调用的时候才会传入，所以程序员无法给函数传参，只有系统才能够给函数进行传参。) 就好比系统调用函数做的事情就是 fn（事件对象），所以我们定义的时候就可以function fn（event）{} event就是事件对象。

注意：这种方法IE8以下不兼容。但是IE8有另一种方法：window.event
形参：
在这里插入图片描述
window.event
在这里插入图片描述
每次事件绑定完成后返回的事件对象都是不同的，即使调用的都是window.event
在这里插入图片描述

事件对象属性

button 的属性

格式：事件对象.button
返回值：点击鼠标左键：返回0 点击鼠标滚轮：返回1 点击鼠标右键：返回2

在这里插入图片描述

获取鼠标位置的属性（以下三者的区别在于：原点位置不一样）（x轴以右为正，y轴向下为正）

clientX、clientY：
格式：事件对象.clientX、事件对象.clientY
返回值：以可视窗口左上角为原点，返回鼠标坐标点（不带单位）

pageX、pageY：
返回值：整个页面的左上角为原点，返回鼠标坐标点 （不带单位）

screenX、screenY：
返回值：整个电脑屏幕左上角为原点，返回鼠标坐标点 （不带单位）

offetX、offsetY
返回值：点击元素的左上角为原点，返回鼠标坐标点 （不带单位）

案例：跟随鼠标移动的提示框
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.main div{
				margin: 200px;
				font-size: 50px;
			}
			.main p{
				display: none;
				position: absolute;
				font-size: 20px;
				width: 200px;
				background-color: lightgray;
			}
		</style>
	</head>
	<body>
		<div class="main">
			<div class="html">
				<a href="">HTML</a>
				<p>
					HTML的全称为超文本标记语言，是一种标记语言。
					它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。
					HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。 [1]
				</p>
			</div>
			<div class="css">
				<a href="">CSS</a>
				<p>
					CSS
					层叠样式表(英文全称：
					Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）
					或XML（标准通用标记语言的一个子集）等文件样式的计算机语言
					。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
				</p>
			</div>
			<div class="javascript">
				<a href="">JavaScript</a>
				<p>
					avaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。
					虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript
					基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格
				</p>
			</div>
		</div>
		<script type="text/javascript">
			var omain=document.getElementsByClassName('main')[0]
			var aA=omain.getElementsByTagName('a')
			var aP=omain.getElementsByTagName('p')
			for(var i=0;i<aA.length;i++){
				aA[i].index=i
				aA[i].onmousemove=function(event){
					console.log(event.pageY,event.pageX)
					for(var j=0;j<aP.length;j++){
						aP[j].style.display='none'
					}
					aP[this.index].style.display='block'
					aP[this.index].style.top=event.pageY+10+'px'
					aP[this.index].style.left=event.pageX+10+'px'
					
				}
				aA[i].onmouseleave=function(event){
					for(var j=0;j<aP.length;j++){
						aP[j].style.display='none'
					}
				}
			}
		</script>
	</body>
</html>

鼠标键+摁键属性：

shifitKey altKey ctrlKey metaKey

shifitKey 按下shifit键为true，默认为false

altKey 按下alt键为true，默认为false

ctrlKey 按下ctrl键为true，默认为false

metaKey window系统 按下window（开始键）为true，mac摁下comman键 为true
在这里插入图片描述
应用：可以和其它功能组合：形成快捷键

键盘键属性：

keyCode 键码
功能：返回键盘摁键 键码
返回值：键码：字母都是大写ASIIC码值，其他键都是一一对应的ASIIC码

which
功能：返回键盘摁键 键码
返回值：键码：字母都是大写ASIIC码值，其他键都是一一对应的ASIIC码

charCode字符码（仅在keypress下支持）
返回值：除了keypress事件处理函数触发输出的charCode代表字符码。其他事件处理函数触发的输出的charCode都是0
在这里插入图片描述
keydown、keyup事件类型触发事件处理函数输出的键码都是不区分字母大小的，但是keypress事件类型触发事件处理函数输出的键码都是区分字母大小的

触发/目标对象属性

target:（IE8以下不兼容）

功能：找到触发事件发生的目标对象

返回值：触发事件发生的目标对象

window.event.srcElement （IE8以下兼容）
在这里插入图片描述
IE7版本
在这里插入图片描述
this指向当前函数的主人，target指向引起事件发生的主人。以上面的例子来说，点击事件最开始是由我点击了 第一个li引起的，但是li层级比ul高，当我点击li的时候，同时因为事件冒泡，ul也发生了点击事件。所以事件触发了，而目标对象是li。

阻止事件冒泡属性：
cancleBubble=true
在这里插入图片描述
stopProgapation()
在这里插入图片描述
cancleBubble=true和stopPropagetion()这两个方法浏览器比较高的版本兼容，但是在低版本的情况下也存在不兼容现象。
实现跨浏览器兼容：

function stopBubble(e){
			
				if(e.stopPropagation){
					e.stopPropagation()
				}else{
					e.cancelBubble=true;
				}
			}

在这里插入图片描述
案例：

精灵移动（图片跟随鼠标移动）：
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body,html{
				height: 100%;
				width: 100px%;
				background-color: #000000;
				overflow: hidden;
			}
			img{
				position: absolute;
			}
		</style>
	</head>
	<body>
		<img id="imag" src="2700.gif_wh860.gif" style="width: 100px;height: 100px;">
		<script type="text/javascript">
			var oIm=document.getElementById('imag')
			document.onmousemove=function(ev){
				var e=ev?ev:window.event;
				oIm.style.top=e.clientY+10+'px';
				oIm.style.left=e.clientX+10+'px'
				if(e.clientX>(document.body.offsetWidth-100)){
					console.log(e.clientX,document.body.offsetWidth-100)
					oIm.style.left=document.body.offsetWidth-100+'px'
				}
				if(e.clientX<0){
					oIm.style.left=0+'px'
				}
			}
		</script>
	</body>
</html>

跟随鼠标移动形成一串连起来的点
在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			li {
				position: absolute;
			}
		</style>
	</head>
	<body>
		<ul>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
			<li></li>
		</ul>
		<script type="text/javascript">
			var ali = document.getElementsByTagName('li')
			document.onmousemove = function(ev) {
				var e = ev ? ev : window.event;
				/* 每一次移动，都让后一个替代前一个的位置 */
				for (var i = ali.length-1; i>0; i--) {
					ali[i].style.left = ali[i-1].offsetLeft + 'px';
					ali[i].style.top = ali[i-1].offsetTop + 'px';
				}
				
				ali[0].style.left=e.clientX+'px'
				ali[0].style.top=e.clientY+'px'

			}
		</script>
	</body>
</html>

阻止默认行为属性：
preventDefault() （IE8以下不兼容含IE8 谷歌火狐都可）
window.event.returnValue=flase (IE8以下兼容IE8以上不行 谷歌火狐都可）
方式一：

案例：设置右键菜单：

/* 关闭右键菜单 */
			document.oncontextmenu=function(){
				return false
			}

在这里插入图片描述
案例：阻止点击 a标签跳转

//阻止a标签跳转
a元素节点.onclick=function(){
					return false
				}

在这里插入图片描述
comfirm 点击确定返回true 点击取消返回false

以上两种阻止默认行为的方式有一个缺点就是：因为执行程序遇到return就会结束运行，那么后面的程序就会执行不到。

方式二：（适合阻止a链接跳转。但是不适合右键菜单）
在这里插入图片描述
案例：拖拽
原理：当鼠标摁下元素时，触发的时元素的mousedown事件处理函数，与其同时，应该触发窗口的移动mousemove事件，这样即使在被拖拽的元素之外，也能够捕获到坐标。当鼠标抬起时，可能鼠标不在被拖拽元素的内部了，因此要将鼠标抬起的mouseup处理函数绑定给浏览器窗口，并且同时让鼠标移动失效，因为我们给窗口的绑定的鼠标移动，所以只需要将窗口的移动事件处理函数置为空字符串即可。
在这里插入图片描述
优化：解决出界
在这里插入图片描述

每天进步一大步
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js事件对象的常见属性和方法
王敬辉的博客
06-02 689
e.target target 属性规定哪个 DOM 元素触发了该事件。 target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。 this和e.target的区别 e.target 点击了哪儿个元素，就返回哪儿个元素 this是哪儿个元素绑定了点击事件，那么就返回谁； <ul> <li>123</li> <li>456</li> <li>789</li> </ul>
JavaScript中Window对象的属性及事件
11-24
windows对象属性 属性 描述 closed 返回窗口是否已被关闭。 defaultStatus 设置或返回窗口状态栏中的默认文本。 document 对 Document 对象的只读引用。请参阅 Document 对象。 history 对 History 对象...
javascript事件；event对象的属性
besily的专栏
12-18 810
javascript事件列表解说事件浏览器支持解说一般事件onclickIE3、N2鼠标点击时触发此事件ondblclickIE4、N4鼠标双击时触发此事件onmousedownIE4、N4按下鼠标时触发此事件onmouseupIE4、N4鼠标按下后松开鼠标时触发此事件
JavaScript中的事件对象、事件对象的属性
slom_fxt的博客
02-02 558
JavaScript中的事件对象、事件对象的属性
事件对象属性
m0_71213173的博客
11-26 176
浏览器中的事件都是以对象的形式存在的，在标准DOM中，规定事件对象必须作为唯一的参数传给事件处理函数。·鼠标事件:使用鼠标在页面上执行某些操作时触发的事件。·键盘事件:使用键盘在页面上执行某些接操作时触发的事件。·用户界面事件:涉及与 BOM 交互的通用测览器事件。· 焦点事件:在元素获得或失去焦点时触发的事件。·输入事件:向文档中输入文本时触发的事事件。·输入法事件:使用某些输入法时触发的真事件。·滚轮事件:使用鼠标滚轮时触发的事件。二.事件对象中的常见属性。
事件对象和target事件属性
benben0729的专栏
07-09 1726
事件对象什么是事件对象呢？当我们触发一个事件时，便会产生一个事件对象，这个对象中包含着这个事件的相关信息，包括导致事件的元素、事件的类型、以及其它与特定事件相关的信息等。这个对象是在执行事件时，浏览器通过函数传递过来的。input.onclick = function (evt) { //接受 event 对象，名称不一定非要 event     alert(evt); //MouseEvent，...
JavaScript对象、属性、事件手册集合方便查询
10-29
JavaScript对象、属性、事件手册查询，对于学习js的朋友方便查找。
JavaScript事件 “事件对象”的注意要点
11-26
event对象包含与创建它的特定事件有关的属性和方法。除法的事件类型不一样，可用的属性方法就不一样。不过，所有的事件都会有下表列出的成员。 下面列出了 2 级 DOM 事件标准定义的属性： bubbles: 返回布尔值，...
javaScript对象和属性的创建方法
10-31
javaScript对象和属性的创建方法
JavaScript事件对象event用法分析
10-18
主要介绍了JavaScript事件对象event用法,结合实例形式分析了事件对象event中常用的属性、方法、相关操作技巧与注意事项,需要的朋友可以参考下
JavaScript事件学习小结（三）js事件对象
11-23
相关阅读： JavaScript事件学习小结(五）js中事件类型之鼠标事件 ... JavaScript事件学习小结（一）事件流 ... javaScript事件学习小结（四）event的公共成员（属性和...JavaScript事件学习小结（三）js事件对象 //www.
浅析JavaScript访问对象属性和方法及区别
11-27
属性是一个变量，用来表示一个对象的特征，如颜色、大小、重量等；方法是一个函数，用来表示对象的操作，如奔跑、呼吸、跳跃等。 在JavaScript中通常使用”.”运算符来存取...2. 使用“ [ ] ”来访问对象属性 语法：  
理解JavaScript事件对象
11-26
event对象包含与创建它的特定事件有关的属性和方法。除法的事件类型不一样，可用的属性方法就不一样。不过，所有的事件都会有下表列出的成员。 下面列出了 2 级 DOM 事件标准定义的属性： bubbles: 返回布尔值，...
Javascript基础教程之函数对象和属性
10-24
主要介绍了Javascript基础教程之函数对象和属性,需要的朋友可以参考下
JavaScript—事件对象和事件对象属性
weixin_46048542的博客
02-10 380
事件绑定 元素节点.on + 事件类型 = 匿名函数 【注】系统会在事件绑定一旦完成的时候，生成一个事件对象 【注】触发事件的时候，系统会自动去调用事件绑定的函数，将事件对象当做第一个参数传入。 条件对象: button 的属性 0左键 1滚轮 2右键 获取当前鼠标的位置:(原点位置不一样) clientX clientY 原点位置：可视窗口的..
JavaScript获取事件对象和目标对象
weixin_34122548的博客
05-30 247
在JavaScript开发中，经常需要获取触发某个事件的目标对象。让后根据目标对象进行不同的业务处理。下面展示通过JavaScript获取触发事件的事件目标对象。如下：   Js代码   1 2 3 4 5 6 7 8 9 10 window.onload = function(){     var obj = document.getEle...
JavaScript中的Node对象和事件
可行的code
12-28 471
Node对象 Insert title here 我是span的区域 北京 上海 广州 小时代1 小时代2 小时代3 我是按钮 /* 元素    属性文本 nodeName 大写的标签名称   属性名称#text nodeType 1  2 3 nodeVa
js中关于事件对象的详解
就是有点怕怕的博客
02-05 166
1.事件对象获取时的兼容性写法 e = e || window.event; /***************** 示例 ******************/ <p>abc</p> <script> var p = document.querySelector('p'); p.onclick = function(e){ e = e || wind...
javascript知识训练：对象与事件
最新发布
03-16
在JavaScript中，对象可以包含属性和方法，属性是对象的特征，方法是对象的行为。事件是指用户在网页上的操作，例如点击、鼠标移动等，JavaScript可以通过事件来响应用户的操作，从而实现交互效果。在训练JavaScript...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值