React 事件机制

1、原生Dom的事件流

image.png

如上图所示：
在JavaScript中，事件的触发实质上是要经过三个阶段:事件捕获、目标对象本身的事件处理和事件冒泡。

• 事件捕获 （由父级元素将事件一直传递到事件发生的元素）
  当某个事件触发时，文档根节点最先接受到事件，然后根据DOM树结构向具体绑定事件的元素传递。该阶段为父元素截获事件提供了机会。
  事件传递路径为：
  window —> document —> body —> div—> text

• 目标阶段
  具体元素已经捕获事件后，执行目标事件本身的处理事件。

• 事件冒泡
  根据DOM树结构由具体触发事件的元素向根节点传递。正因为事件在DOM的传递经历这样一个过程，从而为事件委托提供了可能。
  事件传递路径：
  text—> div —> body —> document —> window

2、事件委托（事件代理）

事件委托的实质就是将子元素事件的处理委托给父级元素处理。把事件监听器添加到它们的父元素上。事件监听器会分析从子元素冒泡上来的事件，找到它是哪个子元素的事件。

举个栗子：如果我们有一个列表，列表之中有大量的列表项，我们需要在点击列表项的时候响应一个事件

    

        
content1
        
content2
        
content3
        
content4