web实现事件对象和事件委托的代码
时间: 2024-02-06 16:09:01 浏览: 67
.net委托与事件代码
事件对象和事件委托是 Web 开发中经常使用的技术,它们可以帮助我们更好地处理用户交互。下面是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>事件对象和事件委托示例</title>
</head>
<body>
<ul id="myList">
<li>列表项 1</li>
<li>列表项 2</li>
<li>列表项 3</li>
<li>列表项 4</li>
<li>列表项 5</li>
</ul>
<script>
// 获取列表元素
var myList = document.getElementById('myList');
// 添加点击事件监听器
myList.addEventListener('click', function(event) {
// 获取被点击的元素
var target = event.target;
// 判断被点击的元素是否为列表项(排除 ul 和其他子元素)
if (target.tagName === 'LI') {
// 处理点击事件
console.log('您点击了列表项:' + target.innerHTML);
}
});
</script>
</body>
</html>
```
上述代码实现了一个简单的事件委托,通过在 ul 元素上添加 click 事件监听器,处理 ul 元素内部子元素的点击事件。在事件处理函数中,我们利用事件对象 event 获取被点击的元素 target,判断其 tag 名称是否为 LI,如果是则处理点击事件。这种方式可以避免为每个列表项都添加一个点击事件监听器,提高代码的可维护性和性能。
阅读全文