JavaScript 事件的阶段

JavaScript 事件的生命周期分为三个不同的阶段。

• 捕获阶段
• 目标阶段
• 冒泡阶段

它们遵循与上面列出的相同的顺序。

捕获阶段是事件下降到元素的时间。目标阶段是事件到达元素时，冒泡阶段是事件从元素冒泡时。

那么在一个事件的三个阶段中，哪个阶段使用了addEventListener()以及程序员如何改变它呢？

html

  

    
        Click Me!
    
      
    
        document.getElementById('btn')
            .addEventListener('click', 
            function () {
                alert('Button Clicked!');
            })
    

  

输出：

addEventListener()方法将在冒泡阶段被调用。上面显示的代码将使用带有两个参数的 addEventListener()。但是，在上面的代码中，可以使用第三个参数为“true”调用.addEventListener() ，这将在捕获阶段更早地调用侦听器。

例子：

html

    
  
    
        
            Click Me!
        
        
            document.getElementById('bdy')
                .addEventListener('click', function () {
                alert('Body!');
            })
            document.getElementById('container')
                .addEventListener('click', function () {
                alert('Div!');
            }, true)
            document.getElementById('btn')
                .addEventListener('click', function () {
                alert('Button!');
            })
        
    
  
    

输出：

在上面的代码中， body和button处于冒泡阶段（默认），而div设置为捕获阶段。单击按钮时，它会再次从顶部开始。当涉及到body元素时，它不会运行函数，因为我们仍处于捕获阶段。但是当它到达div时，它会运行该函数，因为addEventListener()的第三个参数是“true”。所以它必须在捕获阶段运行。当它到达按钮时，它会从捕获阶段切换到目标阶段，最后切换到冒泡阶段。它触发处于默认模式的addEventListener 。

所以上面的代码会给出警告消息框，显示“div”，然后是“button”，最后是“body”。