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

Myth丶恋晨 2021-11-09 01:52 250阅读 0赞

问题：为元素绑定多个事件，  
对象.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>

发表评论取消回复

表情：

评论列表（有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

相关 js 查看元素已绑定事件

js 查看元素已绑定事件以 element Tooltip 文字提示为例： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpd

旧城等待，/ 2023年08月17日 17:06/ 0 赞/ 51 阅读

相关原生js给一个元素绑定click事件（三种实现方法）

原生js给一个元素绑定click事件（三种实现方法） > 第一种直接在DOM元素绑定 <div id="btn" οnclick="one()"></div>

左手的ㄟ右手/ 2023年06月17日 06:59/ 0 赞/ 1 阅读

相关 js绑定事件兼容性封装函数

function addEvent(ele, type, handle) { if(ele.addE

ゝ一纸荒年。/ 2022年12月08日 04:24/ 0 赞/ 167 阅读

相关【JS】原生JS事件绑定onclick和addEventListener

onclick绑定方式优点： \- 简洁 \- 处理事件的this关键字指向当前元素缺点： \- 不能对事件捕获或事件冒泡进行控制，只能使用事件冒泡，

女爷i/ 2022年05月27日 04:42/ 0 赞/ 630 阅读

相关原生js实现双向数据绑定

js实现双向数据绑定 <!DOCTYPE html> <html lang="en"> <head> <meta chars

怼烎@/ 2022年05月26日 07:48/ 0 赞/ 213 阅读

相关组件绑定原生事件

,//在子组件里声明方法属于原生事件绑定，且执行子组件里的方法。如果也在父组件里写事件，则不会执行 <!DOCTYPE html> <html> <head>

╰+攻爆jí腚メ/ 2022年05月23日 22:10/ 0 赞/ 259 阅读

相关 JS绑定事件

开发工具与关键技术：DW 作者：文泽钦撰写时间：2019年1月17日目的：实现一些js简单绑定按钮事件分享一些简单的js绑定事件给一些刚入门的网友玩玩，代码简

深藏阁楼爱情的钟/ 2022年03月26日 11:20/ 0 赞/ 314 阅读

相关【JS】论元素的绑定和解绑事件

前言在JS的学习过程中，我们会了解到DOM，了解到元素，那么如何对一个元素进行绑定事件呢？事件绑定完之后可不可以解绑呢？都有什么方法呢？这都是今天我们要学习的内容。

以你之姓@/ 2022年03月25日 11:10/ 0 赞/ 267 阅读

相关 js 为元素绑定事件兼容代码

> <!DOCTYPE html> > <html lang="zh-cn"> > <head> > <meta charset="UTF-8"> >

冷不防/ 2022年03月11日 01:00/ 0 赞/ 236 阅读

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

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

Myth丶恋晨/ 2021年11月09日 01:52/ 0 赞/ 251 阅读