event

最新推荐文章于 2024-11-05 15:26:40 发布

小张的前端日常

最新推荐文章于 2024-11-05 15:26:40 发布

阅读量39

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_51989086/article/details/133894875

版权

DOM-事件对象

在 DOM 中存在着多种不同类型的事件对象
               - 多种事件对象有一个共同的祖先 Event
                   - event.target 触发事件对象
                   - event.currentTarget 绑定事件的对象（同 this）
                   - event.stopPropagation 停止事件的传导
                   - event.preventDefault 取消默认行为
               - 事件的冒泡(pubble)
                   - 事件的冒泡就是事件上传导
                   - 当元素上的某个事件被触发后，其父元素上的相同事件也会同时被触发
               -不希望事件冒泡时，可以通过事件对象来取消冒泡
                   -event.stopPropagation()

           在事件的响应函数中：
               event.target 表示的时触发事件的对象
               this 绑定事件的对象

<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#box1{
				width: 300px;
				height: 300px;
				background-color: #def;
			}
			#box2{
				width: 250px;
				height: 250px;
				background-color: #edf;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			<div id ="box2"></div>
		</div>
		<a id ="baidu" href="https://www.baidu.com">超链接</a>
		<script>
			/* 
			在 DOM 中存在着多种不同类型的事件对象
				- 多种事件对象有一个共同的祖先  Event
					- event.target 触发事件对象
					- event.currentTarget 绑定事件的对象（同 this）
					- event.stopPropagation 停止事件的传导
					- event.preventDefault 取消默认行为
				- 事件的冒泡(pubble)
					- 事件的冒泡就是事件上传导
					- 当元素上的某个事件被触发后，其父元素上的相同事件也会同时被触发
				-不希望事件冒泡时，可以通过事件对象来取消冒泡
					-event.stopPropagation() 
			 
			 在事件的响应函数中：
				event.target 表示的时触发事件的对象
				this 绑定事件的对象
			 */
			//给这个 div 绑定事件
			const box1 = document.getElementById("box1");
			const box2 = document.getElementById("box2");
			
			box1.addEventListener("click",event =>{
				alert("box1");
				
				//console.log(this);  //box1 this= event.currentTarget
				// console.log(event.target);//表示的是触发事件的对象
				
				console.log(event.target);
			})
			box2.addEventListener("click",function(event){
				//event.stopPropagation(); //停止事件的传导
				alert("box2");
			})
			
			const baidu = document.getElementById("baidu");
			baidu.onclick = function(){
				event.preventDefault();//取消默认行为
				alert("baidubaidu");
			}
		</script>
	</body>