开发者社区> 问答> 正文

如何通过js实现添加事件监听和移除事件监听

我想实现如下功能,本来一个HTMl的标签上是没有当鼠标滑过时触发js函数的事件,但是当点击了一个按钮之后,这个按钮触发的js会给那个HTML标签添加上鼠标滑过的事件,这个应该如何实现?

还有一个问题就是我想实现当鼠标停在某个组件上时,这个组件上会浮起一个提示信息,我写的代码可以实现鼠标停在这里就会出现提示信息,但是那个提示信息的位置却是不动,也就是它只在固定的位置出现,如何实现让这个提示信息在鼠标停留的位置出现?

我第二个问题的代码如下,请大神们给看看如何修改:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script type="text/javascript">
        //显示角色详细信息
        function showDetail(flag, a) {
            var detailDiv = a.parentNode.getElementsByClassName('detail_info')[0];
            if (flag) {
                detailDiv.style.display = "block";
            }
            else
                detailDiv.style.display = "none";
        }
    </script>
    <script src="../assets/jquery.js"></script>
</head>
<body>
 
<input type ="button" value="测试增加/移除监听"  onclick="testAction()"/>
<div >
    <input  onmouseover="showDetail(true,this);" onmouseout="showDetail(false,this);"  type="text" />
    <input  onmouseover="showDetail(true,this);" onmouseout="showDetail(false,this);"  type="text" />
 
    <!--浮动的详细信息-->
    <div class="detail_info" >
        浮动提示信息
    </div>
</div>
</body>
</html>

展开
收起
a123456678 2016-07-13 14:29:00 3144 0
1 条回答
写回答
取消 提交回答
  • <!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>
    2019-07-17 19:55:33
    赞同 展开评论 打赏
问答分类:
问答地址:
问答排行榜
最热
最新

相关电子书

更多
JavaScript函数 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载