如何通过js实现添加事件监听和移除事件监听
2个回答
展开全部
直接用js实现比较麻烦，不同版本的浏览器（主要是低版本的）支持的方法会不一样。
建议使用jquery实现：
添加事件例：
$("button").on("click", function(){
console.log("clicked");
});移除事件例：
$("button").off("click");
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.detail_info {
position: absolute;
display: none;
}
</style>
</head>
<body>
<input type ="button" value="测试增加/移除监听" id="btn_bind"/>
<div style="position: relative;" id="box_content">
<input type="text" class="text" />
<input type="text" class="text" />
<!--浮动的详细信息-->
<div class="detail_info" id="box_detail">
浮动提示信息
</div>
</div>
<script type="text/javascript">
(function () {
document.getElementById("btn_bind").addEventListener("click", function () {
if(this.bindStatue) {
removeEvent();
} else {
bindEvent();
}
this.bindStatue = !this.bindStatue;
});
function removeEvent() {
var inputs = document.querySelectorAll(".text");
for(var i = 0, length = inputs.length; i < length; i++) {
inputs[i].removeEventListener("mousemove", showDetail);
inputs[i].removeEventListener("mouseout", hideDetail);
}
}
function bindEvent() {
var inputs = document.querySelectorAll(".text");
for(var i = 0, length = inputs.length; i < length; i++) {
inputs[i].addEventListener("mousemove", showDetail);
inputs[i].addEventListener("mouseout", hideDetail);
}
}
function showDetail(e) {
var e = e || window.event,
box = document.getElementById("box_detail"),
content = document.getElementById("box_content");
box.style.display = "block";
box.style.top = e.clientY - content.offsetTop + "px";
box.style.left = e.clientX - content.offsetLeft + "px";
}
function hideDetail() {
document.getElementById("box_detail").style.display = "none";
}
})();
</script>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
