文档章节

通过原生JS实现为元素添加事件的方法

码农般的学良
 码农般的学良
发布于 2016/11/24 14:57
字数 335
阅读 5
收藏 0

下面小编就为大家带来一篇通过原生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实现为元素添加事件的方法就是小编分享给大家的全部内容了

© 著作权归作者所有

共有 人打赏支持
码农般的学良
粉丝 1
博文 20
码字总数 23265
作品 0
通州
jQuery? 回归JavaScript原生API

如今技术日新月异,各类框架库也是层次不穷。即便当年漫山红遍的JQuery(让开发者,So Perfect!!)如今也有的大势。但JS原生API写法依旧;并且有时候只不过小写一个Demo,或者产品中只有少量...

jeffjade
2015/12/13
0
0
jQuery--[编码规范与最佳实践]

以下是书写jQuery代码的基本规范和最佳实践,这些不包括原生JS规范与最佳实践。 加载jQuery 1、尽量使用CDN加载jQuery。 <script type="text/javascript" src="//ajax.googleapis.com/ajax/l...

Candy_Desire
2014/12/11
0
0
7个重要的javascript函数

原文地址:http://davidwalsh.name/essential-javascript-functions 7个重要的javascript函数 我记得在早期使用javascript时,因为浏览器厂商对javascript的特性,包括基本特性和边缘特性的实...

一路向北的兔斯基
2015/06/08
0
0
JS原生系列-DOM篇(扩展)

继续DOM的研究工作,我们扩展对dom api的学习! 1.介绍针对低级浏览器,能力的监测处理: 2.针对移动端,touch事件的介绍: 3.最后做几个网页实例! 4.ajax的介绍:ajax输出json格式文件 js...

透笔度
2015/08/08
0
0
如何基于Rexsee实现以Web开发方式创建Android应用

Rexsee是国内的开源移动Web开发平台,针对Android手机、触摸屏等终端设备,提供底层开发和运行平台,以及扩展工具包,简化基于SDK的Java原生开发,支持开发者以标准化Web开发模式,即HTML5,...

yejiang
2012/04/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day63-20180821-流利阅读笔记-待学习

性别歧视在日本:“我是女生,所以社会不让我学医” 毛西 2018-08-21 1.今日导读 大家在看病的时候,有留意过女医生的比例吗?在性别歧视现象十分严重的日本,男医生和女医生的比例达到了惊人...

aibinxiao
51分钟前
2
0
Ubuntu18.04 显卡GF-940MX安装NVIDIA-390.77

解决办法: 下面就给大家一个正确的姿势在Ubuntu上安装Nvidia驱动: (a)首先去N卡官网下载自己显卡对应的驱动:www.geforce.cn/drivers (b)下载后好放在英文路径的目录下,怎么简单怎么来...

AI_SKI
今天
4
0
深夜胡思乱想

魔兽世界 最近魔兽世界出了新版本, 周末两天升到了满级,比之前的版本体验好很多,做任务不用抢怪了,不用组队打怪也是共享拾取的。技能简化了很多,哪个亮按哪个。 运维 服务器 产品 之间的...

Firxiao
今天
1
0
MySQL 8 在 Windows 下安装及使用

MySQL 8 带来了全新的体验,比如支持 NoSQL、JSON 等,拥有比 MySQL 5.7 两倍以上的性能提升。本文讲解如何在 Windows 下安装 MySQL 8,以及基本的 MySQL 用法。 下载 下载地址 https://dev....

waylau
今天
2
0
微信第三方平台 access_token is invalid or not latest

微信第三方开发平台code换session_key说的特别容易,但是我一使用就带来无穷无尽的烦恼,搞了一整天也无济于事. 现在记录一下解决问题的过程,方便后来人参考. 我遇到的这个问题搜索了整个网络也...

自由的开源
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部