文档章节

通过原生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
网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/sunhuaqiang1/article/details/82530844 网站开发进阶(五十三)浅谈JS、Ajax、JQuery之间的关系 在项目开发过...

孙华强
09/08
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
JS原生系列-DOM篇(扩展)

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

透笔度
2015/08/08
0
0
7个重要的javascript函数

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

一路向北的兔斯基
2015/06/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

oracle 安装 PL/SQL Developer连接64位Oracle免安装配置

PL/SQL Developer连接64位Oracle 在64位系统上安装64位的Oracle数据库,但是没有对应的64位PL/SQL Developer,此时就不能使用PL/SQL Developer来进行直接连接的,所以要想实现连接还得需要其...

PeakFang-BOK
17分钟前
2
0
裁员寒冬袭来,30岁还在CRUD的Java程序员,拿什么安身立命?

就在近日,智联招聘公布的数据更是侧面印证了很多公司“瘦身”的事实:“2018年第二季度,小微企业用人需求较第一季度平均下降26.6%”。 裁员大潮正滚滚向前,席卷各行各业! 你做好失业的准...

Java填坑之路
19分钟前
3
0
第一章:什么是SpringCloud

第一章:什么是SpringCloud 何为微服务 在了解 SpringCloud之前,我们先来大致了解下 微服务这个概念吧。 传统单体架构 单体架构在小微企业比较常见,典型代表就是一个应用、一个数据库、一个...

DemonsI
24分钟前
6
0
环境搭建之八-- node.js和npm

1.node.js官网下载64位二进制压缩包 node-v8.12.0-linux-x64.tar.xz 2.解压文件 2.1 xz格式文件为 tar格式 xz -d node-v8.12.0-linux-x64.tar.xz 此时文件已经转变为 node-v8.12.0-linux-x64...

imbiao
28分钟前
2
0
JVM调优浅谈

1.数据类型 java虚拟机中,数据类型可以分为两类:基本类型和引用类型。 基本类型的变量保存原始值,即:它代表的值就是数值本身,而引用类型的变量保存引用值。 “引用值”代表了某个对象的...

xtof
32分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部