通过原生JS实现为元素添加事件的方法
通过原生JS实现为元素添加事件的方法
码农般的学良 发表于1年前
通过原生JS实现为元素添加事件的方法
  • 发表于 1年前
  • 阅读 2
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

下面小编就为大家带来一篇通过原生JS实现为元素添加事件的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧

自己写了一个为元素添加事件的方法,并封装到对象中。

说明:

id : 目标元素的ID

type: 事件的类型,注意的是不能加on

fn:事件处理程序

isBubble :规定事件流

代码:

?

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

var bindEvent = {

 

    'add':function(id,type,fn,isBubble){

 

      var dom = document.getElementById(id);

      if(!isBubble) isBubble=false;

      if(dom.addEventListenner){

        dom.addEventListenner(type,fn,isBubble);

      }else if(dom.attachEvent){

        Transit = function(){

          fn.call(dom);

        }

        dom.attachEvent('on'+type,Transit);

      }else{

        dom['on'+type] = fn;

      }

    },

    'remove':function(id,type,fn,isBubble){

      var dom = document.getElementById(id);

      if(!isBubble) isBubble=false;

      if(dom.removeEventListenner){

        dom.removeEventListenner(type,fn,isBubble)

      }else if(dom.detachEvent){

        dom.detachEvent('on'+type,Transit)

      }else{

        dom['on'+type]=null;

      }

 

    }

 

  }

调用方法:

?

1

2

3

4

5

6

7

8

9

10

//定义事件处理程序

 function msg(){

  alert(this.tagName)

 }

 

 //为目标元素绑定事件

 bindEvent.add('link','click',msg,false);

 

 //解除目标元素绑定的事件

 bindEvent.remove('link','click',msg,false);

以上这篇通过原生JS实现为元素添加事件的方法就是小编分享给大家的全部内容了

共有 人打赏支持
粉丝 2
博文 20
码字总数 23265
×
码农般的学良
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: