详细描述一下事件冒泡和捕获的机制，怎样组织事件冒泡？

事件冒泡和事件捕获是 JavaScript 中常用的事件传播模型，用于描述浏览器中事件的传递机制。

事件冒泡指的是事件从最内层元素开始发生，并逐级向外传播至最外层元素的过程。例如，当用户点击一个按钮时，点击事件会先在该按钮上触发，然后向上冒泡到其父级元素，再到其祖先元素，直到冒泡到文档对象。

事件捕获则是相反的过程，它从最外层元素开始，逐级向内传播至最内层元素。例如，当用户点击一个按钮时，点击事件会先在文档对象上触发，然后向下捕获到其祖先元素，再到其父级元素，最后到该按钮元素。

为了组织事件冒泡或捕获，可以通过 `event.stopPropagation()` 和 `event.preventDefault()` 方法来实现。

`event.stopPropagation()` 方法用于停止事件在 DOM 树上的传播，即阻止事件继续冒泡或捕获。例如，在一个嵌套的元素中，如果希望点击内部元素时不触发外部元素的点击事件，可以在内部元素的点击事件中调用该方法。

`event.preventDefault()` 方法用于阻止浏览器默认的事件行为，例如，禁止链接的跳转或表单的提交。例如，在一个表单中，如果需要验证表单数据并在数据不合法时阻止提交，可以在表单的提交事件中调用该方法。

通常情况下，事件冒泡是默认的事件传播模型，可以通过在事件处理函数中调用 `event.stopPropagation()` 方法来停止事件冒泡。如果需要使用事件捕获，可以通过在事件监听函数中设置 `useCapture` 参数为 `true` 来开启事件捕获模式。例如：

document.addEventListener('click', function(event) {
  console.log('document clicked'); // 最先触发
}, true);

document.body.addEventListener('click', function(event) {
  console.log('body clicked');
});

document.querySelector('#button').addEventListener('click', function(event) {
  console.log('button clicked'); // 最后触发
  event.stopPropagation(); // 阻止事件继续冒泡
});

在上面的代码中，当用户点击按钮时，会先触发 `document` 上的点击事件，然后逐级向下捕获到 `body`，最后到达按钮元素。由于在按钮的点击事件中调用了 `event.stopPropagation()` 方法，因此不会触发 `body` 上的点击事件。