在 JavaScript 中,可以通过 addEventListener
方法来实现事件监听,该方法接受三个参数:事件类型、处理函数和一个布尔值,用于指定事件是否在捕获阶段(true
)或冒泡阶段(false
)进行处理。例如,下面的代码将为一个按钮添加点击事件监听器:
var btn = document.getElementById('myBtn');
btn.addEventListener('click', function() {
console.log('Button clicked');
}, false);
在事件传递方面,JavaScript 采用的是事件冒泡模型,也就是说事件从最具体的元素开始触发,然后逐级向上传播到较为不具体的节点。例如,当用户点击按钮时,将会按照以下顺序触发事件:
在事件传递过程中,可以通过 event.target
属性获取触发事件的元素,以及通过 event.stopPropagation()
方法阻止事件的传播。例如,下面的代码演示了如何在一个列表中为每个列表项添加点击事件监听器,同时阻止事件冒泡:
var list = document.getElementById('myList');
list.addEventListener('click', function(event) {
if (event.target.nodeName === 'LI') {
console.log('List item clicked');
}
event.stopPropagation();
}, false);
在这个例子中,当用户点击列表项时,事件处理函数将会输出一段文本,并且阻止事件继续向上冒泡,以避免影响其他元素的事件处理。