javascript事件监听，事件冒泡/捕获总结

最新推荐文章于 2023-01-30 20:47:22 发布

lzding

最新推荐文章于 2023-01-30 20:47:22 发布

阅读量3.8k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/lzding/article/details/45786283

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、javascript事件监听的三种方法

element.addEventListener(type, listener[, useCapture]); // IE6~8不支持
element.attachEvent('on' + type, listener); // IE6~10支持, IE11不支持
element.'on' + type = function(){} // 所有浏览器

以click 点击事件为例：

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
#big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}
#small{width: 150px;height: 100px;background-color: blue;}
</style>

</head>
<body>
<div id="big">
	<div id="small"></div>
</div>

<script>
window.onload = function(){
	var oSmall = document.getElementById('small');
	var oBig = document.getElementById('big');

	//第一种：所有浏览器支持
	oBig.onclick = function(){
		console.log('Big Div');
	}
	//第二种：ie8及ie8以下不支持
	oBig.addEventListener('click', function(){
		console.log('Big Div');
	}, true);

	//第三种：ie6~ie10支持
	oBig.attachEvent('onclick', function(){
		console.log('Big Div');
	});
}
</script>
</body>
</html>

二、事件捕获与事件冒泡

关于事件的捕获与冒泡，引用一段文字来说明：

很久以前有个叫Netscape的姑娘，她制订了Javascript的一套事件驱动机制(即事件捕获)

后来又有一个叫“IE”的小子，这孩子比较傲气，他认为“凭什么我要依照你的规则走”，于是他又创造了一套自己的规则(事件冒泡)

再后来，有个叫W3C的媒婆，想撮合这两个孩子，将他们的特点融合在了一起，这下，事件产生的顺序变成：

事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“捕获阶段(Capture)”;

执行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“冒泡阶段(Bubble)”。

善良的Netscape以及其姐妹们都接受了媒婆的建议，采用了新的事件规则，而骄傲固执的IE小子始终按照自己的规则执行。最终使得这成为困扰前端开发人员的兼容性问题之一。

几个要点：

（1）通过 element.onclick、element.attackEvent('onclick', function(){}) 来监听事件，均为冒泡机制。例子：

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
#big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}
#small{width: 150px;height: 100px;background-color: blue;}
</style>
</head>
<body>
<div id="big">
	<div id="small"></div>
</div>

<script>
window.onload = function(){
	var oSmall = document.getElementById('small');
	var oBig = document.getElementById('big');

	oBig.onclick = function(){
		console.log('Big Div');
	}
	oSmall.onclick = function(){
		console.log('Small Div');
	}
	// 当点击 div#small时，先后输出：
	// Small Div
	// Big Div
}
</script>
</body>
</html>

（2）w3c 标准中的 addEventListener 方法

W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段（即上文引用文字中的蓝色字体部分）。addEventListener 中的第三个参数 true/false，规定了该事件在捕获阶段执行，还是在冒泡阶段执行。

实例说明：

<!DOCTYPE HTML>
<html lang="zh-cn">
<head>
<meta charset="utf-8" />
<title>Javascript</title>
<style>
*{margin: 0;padding: 0;}
#big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}
#small{width: 150px;height: 100px;background-color: blue;}
</style>
</head>
<body>
<div id="big">
	<div id="small"></div>
</div>
<script>
window.onload = function(){
	var oSmall = document.getElementById('small');
	var oBig = document.getElementById('big');

	oSmall.addEventListener('click', function(){
		console.log('Small Div 捕获');
	}, true);
	oBig.addEventListener('click', function(){
		console.log('Big Div 冒泡');
	});
	oBig.addEventListener('click', function(){
		console.log('Big Div 捕获');
	}, true);
	document.addEventListener('click', function(){
		console.log('Document 冒泡');
	});
	document.addEventListener('click', function(){
		console.log('Document 捕获');
	}, true);
}
</script>
</body>
</html>

输出顺序如下图所示：

当我们点击 div#small 元素时，它是这样的过程：

第一阶段 —— 捕获阶段：所以，"Document 捕获" 最先被执行，然后是“Big Div 捕获”，最后是“Small Div 捕获”；

第二阶段 —— 目标阶段：到达 div#small 元素，然后，下一步，进入到冒泡阶段；

第三阶段 —— 冒泡阶段：Small Div 没有事件冒泡，所以，冒泡到 Big Div，发现有事件冒泡，输出“Big Div 冒泡”，再继续往上冒泡，最后输出“Document 冒泡”。整个过程结束。

三、事件监听在不同浏览器下兼容写法

+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

文字引用：

http://www.cnblogs.com/aji88/archive/2012/07/20/2600492.html

lzding

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
javascript事件监听，事件冒泡/捕获总结

一、javascript事件监听机制很久以前有个叫Netscape的姑娘，她制订了Javascript的一套事件驱动机制(即事件捕获)后来又有一个叫“IE”的小子，这孩子比较傲气，他认为“凭什么我要依照你的规则走”，于是他又创造了一套自己的规则(事件冒泡)再后来，有个叫W3C的媒婆，想撮合这两个孩子，将他们的特点融合在了一起，这下，事件产生的顺序变成：事件从根节点开始，逐级派送
复制链接

扫一扫