Mr.J--JS事件监听(捕获&冒泡)

最新推荐文章于 2025-03-31 18:16:40 发布

End_less__

最新推荐文章于 2025-03-31 18:16:40 发布

阅读量627

点赞数

CC 4.0 BY-SA版权

分类专栏： Javascript学习

本文链接：https://blog.youkuaiyun.com/Ms_yjk/article/details/88856118

本文详细介绍了JavaScript中的事件监听，包括addEventListener的使用、移除事件监听的removeEventListener方法，以及事件捕获和冒泡的概念。通过实例展示了事件在DOM中的传播过程，解释了事件捕获先于冒泡执行的机制，并讨论了如何取消事件冒泡。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

addEventListener

在复杂的项目开发中，javascript和html的解耦变得至关重要，我们被推荐使用事件动态绑定的方式来处理按钮的事件。W3C为我们提供了addEventListener()函数用来为指定的dom元素动态绑定事件。这个函数有三个参数：
type:用来设置时间类型，例如click
listener:用来设置监听事件的函数，及type类型的事件发生后执行的函数

大部分情况下，确切的说是我们绑定事件的元素的父元素和子元素都不存在操作类型相同的触发事件时，前两个参数就可以满足我们为按钮绑定事件的需求。
比如：

function sayHello() {
    console.log("hello");
}

var myDiv = document.getElementById("myDiv");
myDiv.addEventListener("click", sayHello);

这样我们点击id为myDiv的元素时，控制台就会输出"Hello"。

通过上面代码可以看到对于addEventListener方法的第一个参数，可以是：click,mouseover,mouseout诸如此类的。于是改写addEventListener方法如下：

function addEvent(elem,type,handle){
			if(elem.addEventListener){
				elem.addEventListener(type,handle,false);
			}else if(elem.attachEvent){
				elem.attachEvent('on'+type,function(){
					handle.call(elem);
				})
			}else{
				elem['on' + type] = handle;
			}
		}

取消绑定事件

removeEventListener

var div = document.getElementsByTagName('div')[0];
div.onclick = function(){
			console.log('处理事件');
			this.onclick = null;			//点击一次之后失效
		}

div.removeEventListener('click',test,false);

对于removeEventListener方法：element.removeEventListener(event, function, useCapture)

function不能使用匿名函数！！！

事件捕获&冒泡

在javascript里，事件委托是很重要的一个东西，事件委托依靠的就是事件冒泡和捕获的机制。DOM(文档对象模型)结构是一个树型结构，当一个HTML元素产生一个事件时，该事件会在元素节点与根结点之间的路径传播，路径所经过的结点都会收到该事件，这个传播过程可称为DOM事件流。

事件冒泡

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8"&g

最低0.47元/天解锁文章

200万优质内容无限畅学