js 事件捕获、冒泡

我就是我 2021-07-24 16:16 467阅读 0赞

事件捕获
    	从上到下
    事件冒泡
    	从下到上
    	在冒泡事件中,event.target表示触发事件的子元素,event.currentTarget表示自身

代码示例：

<html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<style>
    			.div1{ 
    				width:400px;
    				height:400px;
    				position: relative;
    				background-color: orange;
    			}
    			.div2{ 
    				height:100px;
    				width:100px;
    				position:absolute;
    				top: 100px;
    				left:100px;
    				background-color: blueviolet;
    			}
    		</style>
    	</head>
    	<body>
    		
    		<div class="div1">
    			<div class="div2">
    				<div class="div3">
    					
    				</div>
    			</div>
    		</div>
    		
    		<script>
    			var div1=document.querySelector(".div1");
    			var div2=document.querySelector(".div2");
    			var div3=document.querySelector(".div3");
    			
    			div2.onclick=function()
    			{ 
    				console.log("div2 click");
    			}
    			div1.onclick=function()
    			{ 
    				console.log("div1 click");
    			}
    		</script>
    	</body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，467人围观）

还没有评论，来说两句吧...

相关阅读

相关 js事件冒泡和事件捕获详解

avascript与HTML之间的交互是通过事件实现。一、事件流事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接受事件的顺序。IE...

女爷i/ 2024年04月17日 06:03/ 0 赞/ 74 阅读

相关 js事件委托、事件冒泡和捕获

事件冒泡和捕获事件冒泡是指，事件会从最内层的元素开始发生，一直向上传播，直到document对象。事件冒泡可以形象地比喻为把一颗石头投入水中，泡泡会一直从水底冒出水面。

爱被打了一巴掌/ 2022年11月08日 11:48/ 0 赞/ 290 阅读

相关 js中的事件捕获与事件冒泡

[链接1][1] [链接2][2] [1]: http://www.jb51.net/article/42492.htm [2]: http://www.jb5

我会带着你远行/ 2022年07月15日 07:24/ 0 赞/ 230 阅读

相关 JS中的事件冒泡和事件捕获

谈起JavaScript的事件，事件冒泡、事件捕获、阻止默认事件这三个话题，无论是面试还是在平时的工作中，都很难避免。事件捕获阶段：事件从最上一级标签开始往下查找，直到捕

女爷i/ 2022年07月14日 14:24/ 0 赞/ 249 阅读

相关 js 事件冒泡和事件捕获

一块：事件流描述的是从页面接收事件的顺序。 IE的事件是冒泡事件流，而firefox的事件流是捕获事件流。 1.事件冒泡 IE的事件流叫做事件冒泡

比眉伴天荒/ 2022年05月19日 01:12/ 0 赞/ 385 阅读

相关 JS 事件流事件冒泡和捕获

JavaScript与HTML之间的交互是通过事件实现的。事件，就是文档或浏览器窗口中发生的一些特定的交互瞬间。可以使用侦听器来预订事件，以便事件发生时执行相应的代码。　

末蓝、/ 2022年03月15日 17:36/ 0 赞/ 404 阅读

相关 js之事件冒泡和事件捕获

（1）冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。 IE 5.5: div -> body -> document IE

淩亂°似流年/ 2021年12月21日 13:37/ 0 赞/ 369 阅读

相关 js 事件捕获、冒泡

事件捕获从上到下事件冒泡从下到上在冒泡事件中,event.target表示触发事件的子元素,event.currentTa

我就是我/ 2021年07月24日 16:16/ 0 赞/ 468 阅读

相关事件冒泡捕获

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> ...

红太狼/ 2021年03月22日 12:49/ 0 赞/ 678 阅读

相关 JS事件捕获和事件冒泡

事件冒泡大家都知道的，在实际开发中也经常的接触到，然而事件捕获是个什么鬼？　　对“捕获”和“冒泡”这两个概念，我想我们对冒泡更熟悉一些，因为在我们使用的所有浏览器中，...

测试账号/ 2021年01月12日 03:32/ 0 赞/ 757 阅读