原生绑定和解除绑定事件 & jquery事件重复绑定解决办法

最新推荐文章于 2025-03-24 14:17:23 发布

Provenr丶

最新推荐文章于 2025-03-24 14:17:23 发布

阅读量1k

点赞数

分类专栏： JavaScript

JavaScript 专栏收录该内容

28 篇文章

订阅专栏

原生绑定和解除绑定事件

参考链接
https://www.cnblogs.com/jsdarkhorse/archive/2012/09/19/2693191.html

// 事件绑定
        this.bindHandler = (function() {
            if (window.addEventListener) {// 标准浏览器
                return function(elem, type, handler) {// elem:节点    type:事件类型   handler:事件处理程序
                    // 最后一个参数为true:在捕获阶段调用事件处理程序    为false:在冒泡阶段调用事件处理程序
                    elem.addEventListener(type, handler, false);
                }
            } else if (window.attachEvent) {// IE浏览器
                return function(elem, type, handler) {
                    elem.attachEvent("on" + type, handler);
                }
            }
        })();

        // 事件解除
        this.removeHandler = (function() {
            if (window.removeEventListerner) {// 标准浏览器
                return function(elem, type, handler) {
                    elem.removeEventListerner(type, handler, false);

                }
            } else if (window.detachEvent) {// IE浏览器
                return function(elem, type, handler) {
                    elem.detachEvent("on" + type, handler);
                }
            }
        })();

jquery事件重复绑定解决办法

参考大佬链接全是干货：http://blog.youkuaiyun.com/qq_30114149/article/details/79413432

<!DOCTYPE html>  
<html>  
<head>  
    <title></title>  
</head>  
<body>  
    <button id="add-event-more">叠加绑定SayHello事件</button>  
    <button id="add-event-one">先移除再绑定SayHello事件</button>  
    <button id="say-hello">Say Hello</button>  
<script type="text/javascript" src="jquery-2.1.4.min.js"></script>  
<script type="text/javascript">  
    $(document).ready(function () {  
        var iCount = 0;  
        function sayHello() {  
            alert("Hello!");  
        }  
        //  每Click1次，多响应事件一次（叠加了）  
        $('#add-event-more').on('click', function () {  
            iCount = iCount + 1;  
            $("#say-hello").html("Say Hello" + iCount + "次");  
            $("#say-hello").on("click", sayHello);  //  绑定事件（事件叠加了）  
        });  
        //  永远只响应1次事件  
        $('#add-event-one').on("click", function () {  
            $('#say-hello').html("Say Hello 1次");  
            $("#say-hello").off('click').on('click', sayHello);  //  先移除事件（避免事件叠加），在绑定事件  
        })  
    })  
</script>  
</body>  
</html>