JS基础--addEventListener 事件绑定

在 JS 中 可以通过 事件绑定函数 addEventListener( ) 为指定元素对象绑定事件处理函数，且使用此函数可以为同一事件目标注册多个不同函数作为事件处理器。  语法格式如下

objectTarget.addEventListener(" eventType ", handler , captureFlag );

上面方法为  objectTarget 绑定事件处理器 handler ，其中的参数意义为：

参数一 ： 事件类型字符串（事件类型的属性不带 on ，如 click 事件，mousedown 、keypass 等）；

参数二 ： 事件处理函数。（自己编写的函数 ）

参数三 ： 指定 监听事件传播的那个阶段（为 true 和 false 两个值，为 true 时表示 捕获阶段 ，false 表示 冒泡阶段）。

 

事件传递有两种方式：冒泡与捕获

捕获方式 ： 就是在执行时 从外到内的执行函数，即从父集  向 子集层 执行；

冒泡方式 ： 就是在执行时 从外到内的执行函数，即从父集  向 子集层 执行；

例如：

如果你将

元素插入到

元素中，用户点击

元素, 哪个元素的 "click" 事件先被触发呢？

在 冒泡 中，内部元素的事件会先被触发，然后再触发外部元素，即：

元素的点击事件先触发，然后会触发

元素的点击事件。

在 捕获 中，外部元素的事件会先被触发，然后才会触发内部元素的事件，即：

元素的点击事件先触发 ，然后再触发

元素的点击事件。

下面的代码中说明了这一点：

    
实例演示了在添加不同事件监听时，冒泡与捕获的不同。

	
点击段落，我是冒泡。



	
点击段落，我是捕获。 

    

借助图示来理解一下

捕获方式是 先执行 div（父集）的事件，再执行 p 标签（子集）的事件。

冒泡方式是 先执行 p 标签（子集）的事件， 再执行 div（父集）的事件。