js原生实现为元素绑定事件兼容代码

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接: https://blog.csdn.net/weixin_44253336/article/details/98611111

问题:为元素绑定多个事件,
对象.addEventListener(“事件类型”,事件处理函数,false)方法中,谷歌和火狐支持,IE8不支持
对象.attachEvent(“有on的事件类型”,事件处理函数)方法谷歌和火狐支持不支持,IE8支持

要求:同时让每个浏览器都支持

思路:封装兼容代码,判断浏览器是否支持

具体实现代码如下:

<body>
<input type="button" value="按钮" id="btn"/>
</body>

<script>
    /**
     * //为任意的一个元素,绑定任意的一个事件
     * @param element 任意的元素
     * @param type 事件的类型,不加on进行传入
     * @param fn 事件处理函数
     */
    function addEventListener(element, type, fn) {
        //判断浏览器是否支持这个方法
        if (element.addEventListener) {
            element.addEventListener(type, fn, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, fn);
        } else {
            element["on" + type] = fn;
        }
    }

	//测试
	    addEventListener(document.getElementById("btn"), "click", function () {
       	    console.log("哈哈1");
	    });
	    addEventListener(document.getElementById("btn"), "click", function () {
	        console.log("哈哈2");
	    });
	    addEventListener(document.getElementById("btn"), "click", function () {
	        console.log("哈哈3");
	    });
</script>	    

猜你喜欢

转载自blog.csdn.net/weixin_44253336/article/details/98611111