事件代理是指将事件处理程序添加到父元素上，而不是每个子元素上。通过事件冒泡机制，当子元素触发事件时，事件会一直向上冒泡到父元素，父元素上添加的事件处理程序就会被触发。
事件冒泡是指当一个元素触发某个事件时，该事件会从该元素开始向上冒泡至父元素，直至冒泡到文档根节点为止。
以下是一个使用 JavaScript 实现事件代理和冒泡机制的示例代码：
// 获取父元素
var parent = document.getElementById('parent');
// 添加事件处理程序
parent.addEventListener('click', function(event) {
// 判断点击的元素是否为子元素
if (event.target && event.target.nodeName === 'LI') {
// 处理子元素的点击事件
console.log('clicked', event.target);
}
});
在上述代码中，我们首先获取了父元素，然后为其添加了一个 click 事件处理程序。在处理程序中，我们判断点击的元素是否为子元素，如果是，则处理子元素的点击事件。通过这种方式，我们就实现了事件代理和冒泡机制。
需要注意的是，我们在事件处理程序中使用了 event.target 属性来获取触发事件的元素。该属性返回的是当前事件的目标元素，即触发事件的元素。在事件冒泡过程中，该属性会不断改变，直到最终冒泡到文档根节点。