JS元素绑定事件兼容代码

最新推荐文章于 2022-10-15 18:16:17 发布

mr.ocean

最新推荐文章于 2022-10-15 18:16:17 发布

阅读量147

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_45020131/article/details/106603737

版权

javascript 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

代码及测试代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素绑定事件兼容代码</title>

</head>
<body>
<input type="button" value="按钮" id="btn"/>
<script src="command.js"></script>
<script>
    // 为任意元素，绑定任意的事件，任意的袁术，事件的类型，事件处理函数
    /**
     *
     * @param element 元素
     * @param type 元素的类型{String}
     * @param fn  函数
     */
    function addEventListener(element, type, fn) {
        // 判断浏览器是否支持这个方法
        if (element.addEventListener) {
            element.addEventListener(type, fn, false);
        } else if (element.attachEvent) { // 兼容ie
            element.attachEvent("on" + type, fn);
        } else {
            element["on" + type] = fn;
        }
    }

    // 测试,这里使用谷歌，火狐及IE浏览器进行测试
    function my$(id) {
        return document.getElementById(id);
    }
    addEventListener(my$("btn"), "click", function () {
        console.log("ocean1")
    });
    addEventListener(my$("btn"), "click", function () {
        console.log("ocean2")
    });
    addEventListener(my$("btn"), "click", function () {
        console.log("ocean3")
    });
</script>
</body>
</html>