controltemplate绑定自定义事件_DOM 事件详解

最新推荐文章于 2023-10-05 16:26:19 发布

李大雷

最新推荐文章于 2023-10-05 16:26:19 发布

阅读量260

点赞数

文章标签： controltemplate绑定自定义事件

本文链接：https://blog.csdn.net/weixin_42521949/article/details/112117688

版权

好好学习，天天向上

本章主要内容是：注册事件、移除事件的方法和兼容写发

一、注册事件

1、element.addEventListener() 方法

参数：
- 第一个参数：事件类型的字符串（直接书写” click” ，不需要加 on）
- 第二个参数：事件函数
同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数
兼容性问题：不支持 IE9 以下的浏览器

<body>
    <input type="button" value="点击" id="btn">
    <script src="js/common.js"></script>
    <script>
        var btn = my$("btn");
        // DOM 2级事件绑定
        btn.addEventListener("click", function (){
            alert(1);
        });
        // 可以多次绑定相同的事件类型  
        // 会根据书写顺序进行排队
        btn.addEventListener("click", clickEvent);
        function clickEvent(){
            alert(2);
        }
    </script>
</body>

2、element.attachEvent() 方法

参数：
- 第一个参数：事件类型的字符串（需要加 on）
- 第二个参数：事件函数
同一个元素可以多次绑定事件监听，同一个事件类型可以注册多个事件函数
兼容性问题：只支持 IE10 及以下的浏览器

// 在 IE8 及以下的浏览器处理事件队列是，会出现顺序错乱
        btn.attachEvent("onclick", function (){
            alert(1);
        });
        btn.attachEvent("onclick", clickEvent);
        function clickEvent (){
            alert(2);
        }

3、兼容写法

自定义一个注册事件函数
参数：事件源，事件类型（不加 on），事件函数
IE9 及以上的浏览器，使用 addEventListener 方法
IE9 以下的浏览器，使用 attachEvent 方法
判断浏览器时，不需要判断它的版本，可以检测浏览器能力
浏览器能力检测：将某个方法的调用作为 if 语句的判断条件，如果浏览器认识该方法返回true，否则返回 false

<body>
    <input type="button" value="点击" id="btn">
    <script src="js/common.js"></script>
    <script>
        var btn = my$("btn");
        // 调用函数
        addEvent(btn, "click", function (){
            alert(1);
        });
        // 自己制作一个兼容所有浏览器的绑定事件的函数
        // 参数：事件源，事件类型，事件函数
        function addEvent (ele, type, fn){
            // IE9 及以上的浏览器，使用 addEventListener 方法
            // IE9 以下的浏览器，使用 attachEvent 方法
            // 浏览器能力检测
            if (ele.addEventListener){
                ele.addEventListener(type, fn);
            } else if (ele.attachEvent){
                ele.attachEvent("on" + type, fn);
            }
        }
    </script>
</body>

二、移除事件

1、element.removeEventListener() 方法

参数：
- 第一个参数：事件类型的字符串（直接书写” click” ，不需要加 on）
- 第二个参数：事件函数引用名
注意：没有办法移除一个匿名函数，所以在注册事件时需要单独声明一个有函数名的事件函数
兼容性问题：不支持 IE9 以下的浏览器

    <script>
        var btn = my$("btn");
        // 事件绑定
        btn.addEventListener("click", fun);
        btn.addEventListener("click", fun2);
        // 解除绑定 要在事件绑定之后  顺序
        btn.removeEventListener("click", fun);
        function fun (){
            alert(1);
        }
        function fun2 (){
            alert(2);
        }
    </script>

2、element.detachEvent() 方法

参数：
- 第一个参数：事件类型的字符串（需要加 on）
- 第二个参数：事件函数
注意：没有办法移除一个匿名函数，所以在注册事件时需要单独声明一个有函数名的事件函数
兼容性问题：只支持 IE10 及以下的浏览器

    <script>
        var btn = my$("btn");
        // 事件绑定
        btn.attachEvent("onclick", fun);
        btn.attachEvent("onclick", fun2);
        // 解除绑定 要在事件绑定之后  顺序
        btn.detachEvent("onclick", fun);
        function fun (){
            alert(1);
        }
        function fun2 (){
            alert(2);
        }
    </script>

3、兼容写法

自定义一个移除事件函数
参数：事件源，事件类型（不加 on），事件函数
IE9 及以上的浏览器，使用 removeEventListener 方法
IE9 以下的浏览器，使用 detachEvent 方法
建议：将自己封装的一些常用函数和方法，放到一个单独的 .js 文件中

<script>
    var btn = my$("btn");

    // 调用函数
    addEvent(btn, "click", fun);
    // 移除事件
    removeEvent(btn, "click", fun);
    function fun(){
        alert(1);
    }
    
    // 自己制作一个兼容所有浏览器的绑定事件的函数
    // 参数：事件源，事件类型，事件函数
    function addEvent (ele, type, fn){
        // IE9 及以上的浏览器，使用 addEventListener 方法
        // IE9 以下的浏览器，使用 attachEvent 方法
        // 浏览器能力检测
        if (ele.addEventListener){
            ele.addEventListener(type, fn);
        } else if (ele.attachEvent){
            ele.attachEvent("on" + type, fn);
        }
    }

    function removeEvent (ele, type, fn){
        // 浏览器能力检测
        if (ele.removeEventListener){
            ele.removeEventListener(type, fn);
        } else if (ele.detachEvent){
            ele.detachEvent("on" + type, fn);
        }
    }
</script>