“document.addEventListener("click", function (event) { if (event.target.classList.contains("box-in-button")) { event.target.style.backgroundColor = "transparent"; event.target.innerHTML = "已关注"; event.target.style.backgroundColor = "rgba(0,0,0,.1)"; } }); ”这个代码可以优化吗?你认为这段代码如何?
时间: 2024-04-22 12:24:36 浏览: 106
这段代码可以进行一些优化。首先,我们可以将样式更改集中在一个类中,而不是在JavaScript中直接更改。这样做可以使代码更易读和维护。另外,我们可以使用事件委托,将事件监听器添加到父元素上,从而减少事件监听器的数量。
以下是优化后的代码示例:
HTML:
```html
<button id="parent-box" class="box">
<span class="box-in-button">关注</span>
</button>
```
CSS:
```css
.box-in-button {
background-color: transparent;
}
.box-in-button.followed {
background-color: rgba(0,0,0,.1);
}
```
JavaScript:
```javascript
document.getElementById("parent-box").addEventListener("click", function (event) {
if (event.target.classList.contains("box-in-button")) {
event.target.classList.add("followed");
event.target.innerHTML = "已关注";
}
});
```
优化后的代码使得样式更易于管理,并减少了事件监听器的数量。
相关问题
document.addEventListener click事件获取点击元素定位值
可以使用 event.target 属性来获取被点击的元素,然后再使用该元素的 getBoundingClientRect() 方法获取该元素的位置信息。
示例代码如下:
```javascript
document.addEventListener('click', function(event) {
var target = event.target;
var rect = target.getBoundingClientRect();
console.log(rect.top, rect.right, rect.bottom, rect.left);
});
```
以上代码会在点击任何元素时输出该元素的位置信息。其中,rect.top、rect.right、rect.bottom 和 rect.left 分别表示该元素距离视口顶部、右侧、底部和左侧的距离。
window.addEventListener和div.addEventListener和document.addEventListener
window.addEventListener、div.addEventListener和document.addEventListener都是用于添加事件监听器的方法,它们之间有一些区别。
1. window.addEventListener:这个方法将事件监听器添加到整个浏览器窗口对象上。它可以用于捕获或冒泡阶段监听窗口对象上的各种事件,如点击、滚动、调整窗口大小等。
2. div.addEventListener:这个方法将事件监听器添加到指定的 `<div>` 元素上。它用于捕获或冒泡阶段监听该 `<div>` 元素上的各种事件,如点击、鼠标移动、键盘输入等。
3. document.addEventListener:这个方法将事件监听器添加到整个文档对象上。它可以用于捕获或冒泡阶段监听整个文档上的各种事件,如点击、滚动、键盘输入等。
它们的语法结构相似,都需要指定要监听的事件类型和事件处理函数。例如,以下是一个使用window.addEventListener来监听点击事件的示例:
```javascript
window.addEventListener('click', function(event) {
// 在这里处理点击事件
});
```