web使用js实现事件对象和事件委托的代码
时间: 2024-02-06 07:09:00 浏览: 25
事件对象和事件委托是 JavaScript 中常用的概念,以下是使用 JavaScript 实现事件对象和事件委托的示例代码:
```html
<!-- HTML 代码 -->
<ul id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ul>
```
```javascript
// 事件对象示例代码
var list = document.getElementById('list');
list.addEventListener('click', function(event) {
console.log(event.target.textContent);
});
// 事件委托示例代码
list.addEventListener('click', function(event) {
if (event.target && event.target.nodeName === 'LI') {
console.log(event.target.textContent);
}
});
```
在上面的示例代码中,我们首先获取了一个 `ul` 元素,并为它添加了一个 `click` 事件监听器。在事件监听器中,我们可以通过事件对象 `event` 获取到当前触发事件的元素,包括它的属性、样式等等。
接下来,我们使用了事件委托的方式来处理点击事件。事件委托是指将事件处理程序添加到父元素上,然后根据事件对象中的 `target` 属性来判断是否触发了子元素的事件。在本例中,我们判断当前触发事件的元素是否为 `li` 元素,如果是,则打印该元素的文本内容。
这种方式的好处是可以减少事件处理程序的数量,并且可以动态地添加或删除子元素,而无需再次添加事件处理程序。