JavaScript中的事件处理机制是网页交互的核心，其中包括了两种主要的事件传播模式：事件冒泡（Bubbling）和事件捕获（Cropping）。事件冒泡是指事件从最深的节点开始，然后逐级向上传播到最外层的节点。而事件捕获则相反，它从最外层节点开始，向下传播到最深的节点。这两种机制在处理事件绑定时有显著的区别。
在JavaScript中，当你给一个元素添加事件监听器时，默认的行为是事件在冒泡阶段被触发。这意味着如果你同时在父元素和子元素上设置了相同类型的事件处理函数，当子元素的事件被触发时，首先执行的是子元素的函数，然后才是父元素的函数。例如，在提供的代码示例中，当点击id3元素时，事件首先在捕获阶段执行obj2和obj3绑定的函数，然后在冒泡阶段执行obj1绑定的函数，因此显示顺序为id2、id3、id1。
`addEventListener`方法用于添加事件监听器，它接收三个参数：事件类型、回调函数和一个布尔值。这个布尔值决定事件是在冒泡阶段还是捕获阶段触发。如果第三个参数为`true`，事件将在捕获阶段执行；若为`false`（默认值），事件将在冒泡阶段执行。
阻止事件冒泡可以防止事件继续向上层元素传播。在标准的W3C浏览器中，可以使用`event.stopPropagation()`来实现这一功能，而在Internet Explorer中，应使用`event.cancelBubble = true`。阻止默认行为则是阻止事件的默认操作，例如链接的跳转或表单的提交。在W3C浏览器中，这可以通过`event.preventDefault()`完成，而IE则使用`event.returnValue = false`。
关于`onclick`、`click`和`on()`事件触发的优先关系，`onclick`通常是在HTML中定义的属性，而`click`是DOM0级事件处理程序，`on()`是jQuery等库提供的方法。在这些方法中，`onclick`具有最高优先级，其次为`click`，最后是`on()`绑定的事件。`onclick`和`click`遵循事件冒泡规则，事件从内到外触发，而`on()`绑定的事件总是在`onclick`和`click`之后触发。
理解事件冒泡和事件捕获对于编写高效且响应式的前端代码至关重要。通过合理利用这两者，可以创建出复杂的交互效果，并精确控制事件的执行顺序，提高用户体验。同时，掌握如何阻止事件冒泡和阻止默认行为，有助于优化性能和防止不必要的行为。在实际开发中，根据具体需求选择合适的方式进行事件处理，可以极大地提高代码的可维护性和可扩展性。
