js box.addEventListener
时间: 2023-12-05 17:37:35 浏览: 37
JavaScript中的addEventListener()方法用于向一个元素添加事件句柄,它可以在元素上添加多个事件句柄,而不会覆盖已有的事件句柄。该方法的语法为:element.addEventListener(event, function, useCapture)。其中,event表示要添加的事件类型,function表示要执行的函数,useCapture表示是否使用事件捕获。相比之下,使用onclick属性添加事件句柄只能添加一个事件句柄,而且会覆盖已有的事件句柄。因此,addEventListener()方法更加灵活和强大。
相关问题
$(".ewm").ready(function(){ var inputBox = document.getElementById("input-box"); inputBox.addEventListener("focus", function() { inputBox.removeAttribute("placeholder"); }); inputBox.addEventListener("blur", function() { inputBox.setAttribute("placeholder", "请扫描料框条码"); }); 换成jquery })
可以将上述代码用 jQuery 重写如下:
```
$(document).ready(function() {
var inputBox = $("#input-box");
inputBox.focus(function() {
inputBox.removeAttr("placeholder");
});
inputBox.blur(function() {
inputBox.attr("placeholder", "请扫描料框条码");
});
});
```
这里使用了 `$(document).ready()` 方法来确保 DOM 加载完成后再执行 JavaScript 代码。然后使用 `$()` 函数来选取 `input-box` 元素,并将其绑定 `focus` 和 `blur` 事件的处理函数,从而实现与原代码相同的功能。
“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)"; } }); ”这个代码可以优化吗?你认为这段代码如何?
这段代码可以进行一些优化。首先,我们可以将样式更改集中在一个类中,而不是在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 = "已关注";
}
});
```
优化后的代码使得样式更易于管理,并减少了事件监听器的数量。