web使用js实现事件对象和事件委托
时间: 2024-02-06 08:08:59 浏览: 35
事件对象是指在响应特定事件时,浏览器会创建一个事件对象,该对象包含有关事件的详细信息。在JavaScript中,我们可以使用event对象来访问这些详细信息并执行相应的操作。以下是使用JavaScript实现事件对象的示例代码:
```javascript
document.addEventListener('click', function(event) {
console.log('clicked!', event.target);
});
```
在上面的代码中,我们使用addEventListener方法监听了click事件,并且在回调函数中访问了事件对象。在事件对象中,我们可以访问target属性来获取事件的目标元素。
事件委托是一种优化JavaScript事件处理的技术,它通过将事件处理程序附加到一个父元素而不是多个子元素来提高性能。以下是使用JavaScript实现事件委托的示例代码:
```javascript
document.addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
console.log('clicked button!', event.target);
}
});
```
在上面的代码中,我们使用addEventListener方法监听了click事件,并且在回调函数中检查了事件的目标元素是否是一个按钮。如果是,我们就执行了相应的操作。由于我们只附加了一个事件处理程序,因此无论有多少按钮被单击,我们都只需要执行一个事件处理程序。这使得我们的代码更加高效。