JavaScript event属性

神奇大叔

已于 2023-06-16 11:18:02 修改

阅读量522

点赞数 1

分类专栏： javaScript 文章标签： javaScript

于 2019-11-28 09:21:39 首次发布

本文链接：https://blog.csdn.net/weixin_43294560/article/details/103287350

版权

javaScript 专栏收录该内容

127 篇文章 6 订阅

订阅专栏

文章目录

event 属性
event 方法

event 属性

event.type：获取事件类型
event.bubbles：当前触发事件的类型是否冒泡，如果支持返回true，否则返回false
event.eventPhase：事件传导至当前节点处于什么状态
- 返回1 事件处于捕获状态
- 返回2 事件处于真正的触发者
- 返回3 事件处于冒泡状态
event.target：返回事件的触发者
event.currentTarget：返回当前阶触发的元素，比如发生在冒泡的第二个元素的回调上就为冒泡的第二个元素
- 当你点击 child 按钮时，event.target（始终指向 child）和 event.currentTarget（在不同阶段分别指向父元素和子元素）将有所不同。

<div id="parent">
  <button id="child">Click me</button>
</div>

const parentElement = document.getElementById('parent');
const childElement = document.getElementById('child');

parentElement.addEventListener('click', function(event) {
  console.log('event.target:', event.target);
  console.log('event.currentTarget:', event.currentTarget);
});

childElement.addEventListener('click', function(event) {
  console.log('event.target:', event.target);
  console.log('event.currentTarget:', event.currentTarget);
});

event 方法

阻止冒泡
- event.stopPropagation();
  - 不会阻止在同一个元素上，其它注册的同类型事件处理器的执行，但会阻止其它注册的同类型事件处理器的冒泡
  - 举个例子，当有多个点击事件处理器绑定到同一个元素，并在其中一个处理器内调用 event.stopPropagation() 时，其他处理器仍然会被执行，但事件不会沿 DOM 树向上冒泡。
- event.stopImmediatePropagation();
  - 会阻止同一个元素上其他注册的同类型事件处理器的执行和冒泡
取消当前节点的默认行为
- event.preventDefault()
- event.returnValue=false

<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				height: 200px;
				width:200px;
				background-color: orange;
			}
			.small{
				height:100px;
				width:100px;
				background-color: pink;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p class="p1">1234</p>
			<div class="small"></div>
		</div>
			<p>aaaa</p>
		<script>
			var box=document.querySelector(".box");
			var p1=document.querySelector(".p1");
			var small=document.querySelector(".small"); 
			var p=document.querySelector("p");
			
			small.onclick=function(){
				console.log("aaaaaaaa");
			}
			box.onclick=function(event){
				console.log("target:"+event.target);
				console.log("currenttarget:"+event.currentTarget);
			}
			
/*			box.οnclick=function(event)
			{
//				console.log(event);
				console.log('box'+event.eventPhase);
				console.log(event.type+event.bubbles)
				console.log(event.bubbles)
			}
			
			p1.οnclick=function(event){
				console.log('p'+event.eventPhase);
			}
			document.body.οnclick=function(event){
				console.log("body"+event.eventPhase);
			}
			
			p1.addEventListener("click",function(event){
				console.log("冒泡p"+event.eventPhase);
				
			},true);
			
			box.addEventListener("click",function(event){
				console.log("冒泡box"+event.eventPhase)
				
			},true)
			
			document.body.addEventListener("click",function(event){
				console.log("冒泡body"+event.eventPhase)
			},true)*/
				function t()
			{
				event.preventDefault();
			}
			
			p.onclick=function(event)
			{
				var event=event||window.event;
				console.log(event);
			}
		</script>
	</body>
</html>