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

最新推荐文章于 2024-05-20 08:27:31 发布

End_less__

最新推荐文章于 2024-05-20 08:27:31 发布

阅读量543

点赞数

分类专栏： Javascript学习

本文链接：https://blog.csdn.net/Ms_yjk/article/details/88856118

版权

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

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

End_less__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Mr.J--JS事件监听(捕获&冒泡)

目录addEventListener取消绑定事件removeEventListener事件捕获&冒泡事件冒泡事件捕获事件捕获和事件冒泡同时存在1.捕获在前2.冒泡在前注意取消事件冒泡addEventListener在复杂的项目开发中，javascript和html的解耦变得至关重要，我们被推荐使用事件动态绑定的方式来处理按钮的事件。W3C...
复制链接

扫一扫

专栏目录