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

最新推荐文章于 2023-01-02 11:28:49 发布
最新推荐文章于 2023-01-02 11:28:49 发布
阅读量224 收藏
点赞数 1
分类专栏： js 文章标签： js 事件兼容
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/chen1042246612/article/details/88257121
版权

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input type="button" value="按钮" id="btn"/>
    <script>
        function my$(idName){
              return document.getElementById(idName);
    }

    //为任意元素,绑定任意的事件,任意的元素,事件的类型,事件处理函数
    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(my$('btn'),'click',function(){
        console.log('123');
    })
    </script>
</body>
</html>

看到了你
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
为元素绑定事件和解绑事件的js兼容代码
qq_32849999的博客
05-16 2046
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;title&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;input type=&
js原生实现为元素绑定事件兼容代码
Potry Code的博客
08-06 476
问题：为元素绑定多个事件， 对象.addEventListener(“事件类型”,事件处理函数,false)方法中，谷歌和火狐支持,IE8不支持 对象.attachEvent(“有on的事件类型”,事件处理函数)方法谷歌和火狐支持不支持,IE8支持 要求：同时让每个浏览器都支持 思路：封装兼容代码，判断浏览器是否支持 具体实现代码如下： <body> <input type="b...
兼容浏览器的js事件绑定函数
hsd2012的专栏
03-29 1844
因为javascript中所有对象都集成与Object，那么只有给Object原型添加一个事件绑定函数，就不需要在处理绑定事件的时候，每次写一长串代码，直接调用即可。在代码中添加红色部分代码，直接便可以在代码中直接调用 nihaoa /** *@param ev事件 @param fn 函数**/Object.prototype.addListener=function(ev,fn){if
JS-绑定事件的三种方法(+兼容代码)
meng的博客
04-22 376
绑定事件的三种方法 ele.onxxx = function (event) {} obj.addEventListener(事件类型, 处理函数, false); obj.attachEvent(‘on’ + 事件类型, 处理函数); ele.onxxx = function (event) {} 程序this指向的是dom元素本身; ** 解除：ele.onxxx = false / ‘’...
js绑定事件兼容性写法
weixin_30641465的博客
12-04 121
<html> <body> <div id="div1">点我绑定事件</div> <script> var addEvent = function( elem, type, handler ){　　//重写addEvent的好处是下一次调用时不会再走if判断，提高了一部分性能 　　if ( window.addE...
js实现动态创建的元素绑定事件
10-21
在JavaScript编程中，动态创建元素并为它们绑定事件是常见的需求。这主要涉及到DOM操作和事件处理程序的绑定。在JavaScript中，有多种方法可以实现动态元素的事件绑定，但传统的方法对于新创建的元素可能不起作用。...
jQuery实现为动态添加的元素绑定事件实例分析
10-18
本文将深入探讨如何使用jQuery为动态添加的元素绑定事件，包括`bind()`, `delegate()`, `live()`, 和 `on()` 四种方法，并通过实例分析他们的用法和适用场景。 首先，基础的`bind()`和`click()`方法是为已存在于DOM...
动态添加js事件实现代码
12-01
在JavaScript编程中，动态添加事件是一项重要的功能，它允许开发者在程序运行时为HTML元素绑定事件处理函数，而不是在HTML标记中硬编码。这增加了代码的灵活性和可维护性。以下是一个关于动态添加js事件实现的详细...
javascript 动态添加事件代码
10-30
在JavaScript中，动态添加事件是常见的需求，但因为不同浏览器之间的兼容性问题，需要采用不同的方法来实现。以下是关于如何在JavaScript中动态添加事件的详细讲解： 1. **setAttribute方法**： `setAttribute` 是...
JS实现为动态添加的元素增加事件功能示例【基于事件委托】
10-18
在这些场景下，为这些新添加的元素绑定事件可能成为一个挑战，因为它们在页面加载时并不存在，传统的直接绑定事件的方式（如`addEventListener`或`attachEvent`）无法对它们生效。本文将详细介绍如何使用事件委托来...
JS给将某个元素绑定事件
weixin_42261759的博客
12-31 434
$('.list').on('click','.delete',function(){ });//.list选中的父元素,为选中class="list"元素内的class='.delete'添加click事件 $('.delete').click(function(){})//一般绑定事件
JS-浏览器事件绑定兼容性问题
m0_48683643的博客
10-05 234
前端笔记-浏览器事件绑定兼容性问题1.代码演示：2.代码优化: 1.事件绑定与解绑:  绑定事件时:  能使用addEventListener方法绑定的，就采用此方法.  否则采用attachEvent方法绑定  解绑事件时:  能用removeEventListener方法绑定就用。  否则就用detachEvent方法绑定。 1.代码演示： 代码如下（示例）： //例.html部分 <div style="width:200px;height:200px;backgro
JS手写兼容性事件绑定
cyj5201314的博客
04-07 121
class bindEvent { constructor (element) { this.element = element } // 绑定 addEventListener (type, handler) { if (this.element.addEventListener) { this.element.addEventListener(type, handler, false) } else if (this.element.attachEve
javascript中通用的绑定事件代码
low_coder
04-06 768
var EventUtil = { addHandler:function (obj,eventName,eventFunc) { if (obj.addEventListener) { obj.addEventListener (eventName,eventFunc,false); }else if (obj.attachEvent) {
JS绑定事件三种方式
热门推荐
qq_37860994的博客
11-05 1万+
三种方式 1、在DOM中直接绑定 2、在JS代码中直接绑定 3、使用事件监听函数绑定事件 一、在DOM中直接绑定 也就是直接在html标签中通过 onXXX=“” 来绑定。举个例子： &amp;amp;amp;amp;amp;lt;input type=&amp;amp;amp;amp;quot;button&amp;amp;amp;amp;quot; value=&amp;amp;amp;amp;quot;点我呦&amp;amp;amp;amp;quot
为dom元素绑定js事件的三种方式
dcfsdf43243的博客
08-09 572
1. 在html标签中直接绑定； 2. 在js中获取到相应的dom元素后绑定； 3. 在js中使用addEventListener（）实现绑定； 具体代码示例如下： <!-- 以下为给dom元素绑定js事件的三种方法 --> <!-- 1--html内直接绑定 --> <input type="button" id="bt...
原生js绑定事件的三种方法
qq_65591699的博客
09-16 4964
【代码】原生js绑定事件的三种方法。
js实现为新添加元素添加绑定事件
m0_64288219的博客
07-04 3175
不知道大家在写js的时候碰没碰到过这样一个问题：算了，还是直接上代码 就是有时我们使用querySelectAll(‘li’)只能获取html原有的li1,li2,li3标签，如果我们此时创建一个新的小li名为newLi并把它添加到div里面,querySelectAll(‘li’）就无法选取newLi。 因为 var li=document.querySelectorAll(‘li’); 把他放在第一行只能获取前三个，因为新的 小li还没有创建出来。 此时把 var li=document.
【js】js绑定事件的三种方法
最新发布
michiko98的博客
01-02 3751
js 绑定事件 原生js
JavaScript核心技术：事件处理与元素操作
"这篇资源主要介绍了JavaScript中的一些关键方法，包括事件处理、元素操作、窗体控制、DOM操作以及变量检查等。它提供了一个全面的JS调用控件方法的集合，适合开发者在进行网页交互和样式修改时参考。" 在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值