js事件对象

已于 2022-05-18 15:59:36 修改
阅读量153 收藏
点赞数
分类专栏： js 文章标签： javascript 前端
于 2021-12-09 13:35:51 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_63400611/article/details/121817588
版权

事件对象简介

 

event对象代表时间的状态,比如键盘按键的状态,鼠标的位置,鼠标按钮的状态

事件发生后,跟事件相关的一系列信息数据的集合都放导这个对象里面,对象就是事件对象event

<body>
	
	<div>123</div>
	
	<script>
		
		var div = document.querySelector('div');
		div.onclick = function(e) {
			console.log(e);
			console.log(window.event);//IE678
			兼容性处理
			e = e || window.event;
			console.log(e);
		}
		div.addEventListener('click', function(e) {
			console.log(e);
		})
//			1.event就是一个事件对象 写到我们侦听函数的小括号里面当形参来看
//			2.事件对象只有有了事件才会存在,他是系统自动创建的,不需要传递参数
//			3.事件对象时我们事件的一系列相关数据的集合 跟事件相关的 必须鼠标点击里
//            面就包含了鼠标的相关信息(坐标等),如果是键盘事件即包含键盘事件的信息(判断按
//            下了哪个键)
//			4.事件对象可以自己命名 比如event evt e
//			5.事件对象也有兼容性问题 ie678 通过 window.event
	</script>
	
</body>

事件对象的常见属性和方法

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAbTBfNjM0MDA2MTE=,size_20,color_FFFFFF,t_70,g_se,x_16 代码

e.target

<body>
	
	<div>123</div>
	<ul>
		<li>abc</li>
		<li>abc</li>
		<li>abc</li>
	</ul>
	
	<script>
		
//		target返回的时触发事件的对象(元素) this返回的是绑定事件的对象(元素)
		var div = document.querySelector('div');
		div.addEventListener('click', function(e) {
			console.log(e.target);
			console.log(this);
		})
		
		var ul = document.querySelector('ul');
		ul.addEventListener('click', function(e) {
//			给ul绑定事件 this就指向ul
			console.log(this);
//			e.target指向点击的对象 谁触发了这个事件 e.target就指向谁
			console.log(e.target);
		})
		
//		兼容性写法
		div.onclick = function(e) {
			e = e || window.Event;
			var target = e.target || e.srcElement;
			console.log(target);
		}
		
//		跟this非常相似的属性currentTarget ie678不认识(点击后返回ul)
		
	</script>
	
</body>

e.type

<body>
	
	<div>123</div>
	<a href="http://www.baidu.com">百度</a>
	
	<script>
		
		var div = document.querySelector('div');
		div.addEventListener('click', fn);
		div.addEventListener('mouseover', fn);
		div.addEventListener('mouseout', fn);
		
		function fn(e) {
			console.log(e.type);
		}
		
	</script>
	
</body>

e.preventDefault

<body>
	
	<div>123</div>
	<a href="http://www.baidu.com">百度</a>
	<form action="http://www.baidu.com">
		<input type="submit" value="提交" name="sub">
	</form>
	
	<script>
		
//		返回事件类型
		var div = document.querySelector('div');
		div.addEventListener('click', fn);
		div.addEventListener('mouseover', fn);
		div.addEventListener('mouseout', fn);
		
		function fn(e) {
			console.log(e.type);
		}
		
//		阻止默认事件
		var a = document.querySelector('a');
		a.addEventListener('click', function(e) {
			e.preventDefault();
		})
		//兼容性写法
		a.onclick = function() {
			//普通浏览器 e.preventDefault();
			e.preventDefault();
			//低版本浏览器 ie678
			e.returnValue;
			//利用return false 也能阻止默认行为 没有兼容性问题 特点:return后面的代码不执行
			//而且只限于传统注册方式a.onclick
			return false;
			alert(11);
		}
		
	</script>
	
</body>

阻止事件冒泡的两种方式

事件冒泡:开始时由最具体的元素接受,然后逐级向上传播到DOM最顶层节点

标准写法:e.stopPropagation

<html>
<head>
<meta charset="utf-8">
<title>333333</title>
	<style>
		.father {
			position: relative;
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 50% auto;
		}
		.son {
			position: absolute;
			width: 150px;
			height: 150px;
			background-color: purple;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			text-align: center;
			line-height: 150px;
		}
	</style>
</head>

<body>
	
	<div class="father">
		<div class="son">son</div>
	</div>
	
	<script>
		
		//阻止冒泡dom推荐的标准方法 stopPropagation();
		var son = document.querySelector('.son');
		son.addEventListener('click', function(e) {
			alert('son');
			e.stopPropagation();
		},false);
		var father = document.querySelector('.father');
		father.addEventListener('click', function(e) {
			alert('father');
		},false);
		document.addEventListener('click', function() {
			alert('document');
		})
		
	</script>
	
</body>
</html>

 

非标准写法:e.cancelBubble

<html>
<head>
<meta charset="utf-8">
<title>333333</title>
	<style>
		.father {
			position: relative;
			width: 200px;
			height: 200px;
			background-color: pink;
			margin: 50% auto;
		}
		.son {
			position: absolute;
			width: 150px;
			height: 150px;
			background-color: purple;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			text-align: center;
			line-height: 150px;
		}
	</style>
</head>

<body>
	
	<div class="father">
		<div class="son">son</div>
	</div>
	
	<script>
		
		//阻止冒泡dom推荐的标准方法 stopPropagation();
		var son = document.querySelector('.son');
		son.addEventListener('click', function(e) {
			alert('son');
			e.cancelBubble = true;// 非标准cancel取消bubble泡泡
		},false);
		var father = document.querySelector('.father');
		father.addEventListener('click', function(e) {
			alert('father');
		},false);
		document.addEventListener('click', function() {
			alert('document');
		})
		
	</script>
	
</body>
</html>

 

兼容性解决方案

//兼容性解决方案
		if(e && e.stopPropagation) {
			e.stopPropagation();
		}else {
			window.event.cancelBubble = true;
		}

 

事件委托(代理,委派)

事件委托也成为事件代理,再jQuery里面称为事件委派

原理

不是每个字节点单独设置监听器,而是将事件监听器设置在父节点上,利用冒泡原理影响每个子节点

作用

只用操作一个DOM,提高了程序的性能

代码

<body>
	
	<ul>
		<li>aaaaaa</li>
		<li>aaaaaa</li>
		<li>aaaaaa</li>
		<li>aaaaaa</li>
		<li>aaaaaa</li>
	</ul>
	
	<script>
		
		var ul = document.querySelector('ul');
		ul.addEventListener('click', function(e) {
//			alert('aaaaa');
//			e.target可以得到点击的对象
			e.target.style.backgroundColor = 'pink';
		})
		
	</script>
	
</body>

 

 

m0_63400611
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS Event 对象——20181116
sunshine102548的博客
11-16 451
Event.eventPhase Event.bubbles属性返回一个布尔值，表示当前事件是否会冒泡。该属性为只读属性，一般用来了解 Event 实例是否可以冒泡。前面说过，除非显式声明，Event构造函数生成的事件，默认是不冒泡的。 Event.eventPhase属性返回一个整数常量，表示事件目前所处的阶段。该属性只读。 var phase = event.eventPhase; ...
浅谈Javascript事件对象
10-20
本文主要介绍了Javascript事件对象的相关实例。具有一定的参考价值，下面跟着小编一起来看下吧
JS事件对象
qq_48439911的博客
04-13 1719
什么是事件对象 eventTarget.onclick = function(event) {} eventTarget.addEventListener('click', function(event) {}） 这个 event 就是事件对象，我们还喜欢的写成 e 或者 evt ，现在一般写 e。 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态。 简单理解：事件发生后，跟事件相关的一系列信息数据的集合都放到这个对象里面，这个对象就是事件对象 event，它
【js基础】事件对象
在热爱技术的路上一直前行。
05-26 4056
1.什么是事件对象 官方解释：event 对象代表事件的状态，比如键盘按键的状态、鼠标的位置、鼠标按钮的状态等。 简单理解：事件发生后，跟事件有关的一系列信息数据的集合都放到整个对象里面，这个对象就是事件对象event，它有很多属性和方法。 结果： 可以将代码中的event换成e，当我们注册事件时，event对象会被系统自动创建，并以此传递给事件处理函数。我们不需要传递实参。 2. 事件对象的兼容性方案 3. 事件对象的常见属性和方法 事件对象属性和方法 说明 e.target 返
js 事件对象
koromon的博客
08-17 292
任务要求效果预览事件理解事件流事件流描述页面接收事件的顺序 事件冒泡流（IE和现代浏览器），由最具体的元素传播到不具体的节点。建议使用 事件捕获流（现代浏览器），由不具体的节点到具体的节点 DOM2级事件规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。Tips: IE9及以上才全部实现 DOM2级 事件（事件流）。使用事件处理程序事件就是用户或者浏览器执行的某种动作，而响应某个事
JavaScript 事件对象的实现
10-29
前我写过一篇关于JavaScript如何实现面向对象编程的文章。今天，我写这篇文章跟大家讨论一下，如何实现事件。
JavaScript学习笔记之JS事件对象
10-24
本文介绍了javascript的事件对象的相关资料,需要的朋友可以参考下
JavaScript 事件对象介绍
10-24
主要介绍了JavaScript 事件对象介绍,需要的朋友可以参考下
JavaScript事件对象event用法分析
10-18
主要介绍了JavaScript事件对象event用法,结合实例形式分析了事件对象event中常用的属性、方法、相关操作技巧与注意事项,需要的朋友可以参考下
JS-事件对象
Java_young_man的博客
05-05 207
JS-事件对象 事件对象是什么 事件对象也是对象，这个对象里有事件触发时的相关信息 例如：鼠标点击事件中，事件对象就存了鼠标点在哪个位置等信息 如何获取 在事件绑定的回调函数的第一个参数就是事件对象 一般命名为 event、ev、e 语法规范： // e 就是 事件对象 元素.addEventListener('click',function(e){ }) 获取事件对象 常用属性 type 获取当前的事件类型 clientX/clientY 获取光标相对于浏览器可见窗口左上角的位置 offsetX/of
js-事件对象
aaaaaabaaaaab的博客
03-14 1163
事件对象-逆战班 事件类型 事件对象.type可以得到事件类型 使用例子 window.onload = function(e){ var ev = e || window.event; console.log(ev.type); // load } 鼠标的按键信息 可以查看按下的是哪个键，事件对象.button属性 右键----buttons为2 ...
JS—事件对象
weixin_30488085的博客
01-21 62
在触发DOM上的某个事件时，会产生一个事件对象event。这个对象中包含着所有与事件有关的信息。包括导致事件的元素，事件的类型以及其他与特定事件相关的信息。 举例鼠标操作导致的事件对象中，会包含鼠标位置的信息，键盘操作导致的事件对象中，会包含按下的键有关的信息， 所有浏览器都支持event对象，event对象会传入DOM0级，DOM2级，HTML指定，的事件处理程序中，但支持的方式不同，所以也...
JS中的事件对象
clh386的博客
11-18 534
在触发DOM上的某个事件时，会产生一个事件对象event，这个对象包括着所有与事件有关的信息。包括导致事件的元素，事件的类型及其他与特定事件相关的信息。例如，鼠标操作导致的事件对象中，会包含鼠标位置的信息，而键盘操作导致的事件中，会包含与按下的键有关的信息。所有浏览器都支持event事件，但支持方式不同。包括this和target和currentTarget的区别分析。preventDefault()阻止默认行为。
事件对象——JS
mantou_riji的博客
04-07 309
文章目录事件对象简单介绍实例一：实现鼠标位置的记录实例二：div跟随鼠标移动 事件对象简单介绍 事件对象: 当事件的响应函数被触发时，浏览器每次都会将一个事件对象作为实参传递进响应函数. 在事件对象中封装了当前事件相关的一切信息，比如:鼠标的坐标键盘哪个按键被按下鼠标滚轮滚动的方向…… 验证： areaDiv.onmousemove = function(event){ alert(event); // alert("我移动了"); }
JavaScript事件对象
m0_59745705的博客
08-08 328
js事件对象啊基础知识
JavaScript 小技巧
我的蓝易我的家:www.lanx.net.cn
08-16 660
JavaScript 小技巧- -                                    事件源对象 event.srcElement.tagName event.srcElement.type 捕获释放 event.srcElement.setCapture();  event.srcElement.releaseCapture();  事件按键 event.
JS的事件对象详解
最新发布
qq_44741577的博客
02-01 1432
当事件被触发时（如onclick事件），浏览器会自动创建一个名为event的JavaScript对象，这个对象存在于window对象中。window.event(window可以省略)表示当前正在处理的事件的详细信息（如事件类型（等）、目标元素、鼠标位置、按键状态等）。JavaScript中的事件对象是一个非常有用的工具，可以在事件处理程序中访问和操作许多方面的事件信息。event.type - 获取事件类型（例如，“click”、"mousedown"等）。
JavaScript事件对象(event)详解
总结来说，event对象在JavaScript事件处理中起着至关重要的作用，它提供了事件相关信息的访问接口。理解和熟练使用event对象是提升JavaScript事件处理能力的关键。通过阅读《Web前端开发精品课》这样的专业书籍，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值