绕过捕获和冒泡将事件分派给元素

要绕过事件捕获和冒泡，可以使用事件的stopPropagation()方法来停止事件的传播。以下是一个示例代码：

HTML:

<div id="outer">
  <div id="inner">
    Click me
  </div>
</div>

JavaScript:

document.getElementById("inner").addEventListener("click", function(event) {
  event.stopPropagation();
  console.log("Inner element clicked");
});

document.getElementById("outer").addEventListener("click", function() {
  console.log("Outer element clicked");
});

在上面的代码中，当点击内部元素时，事件的传播会停止，不会触发外部元素的点击事件。控制台将打印"Inner element clicked"。

注意，这种方法只会阻止事件继续传播给更高层级的元素，但是无法阻止事件传播到同级或更低层级的元素。如果要完全绕过事件的捕获和冒泡，可以使用事件的dispatchEvent()方法来手动分派事件给特定元素。以下是一个示例代码：

HTML:

<div id="outer">
  <div id="inner">
    Click me
  </div>
</div>

JavaScript:

document.getElementById("inner").addEventListener("click", function(event) {
  var customEvent = new Event("customClick");
  document.getElementById("outer").dispatchEvent(customEvent);
});

document.getElementById("outer").addEventListener("customClick", function() {
  console.log("Custom click event dispatched to outer element");
});

在上面的代码中，当点击内部元素时，通过dispatchEvent()方法手动分派一个自定义事件给外部元素。控制台将打印"Custom click event dispatched to outer element"。

通过上述方法，可以绕过事件的捕获和冒泡，将事件直接分派给指定的元素。