您的位置：首页 > Web前端 > JavaScript

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

2016-11-24 00:00 781 查看

下面小编就为大家带来一篇通过原生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

varbindEvent={

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

vardom=document.getElementById(id);
if(!isBubble)isBubble=false;
if(dom.addEventListenner){
dom.addEventListenner(type,fn,isBubble);
}elseif(dom.attachEvent){
Transit=function(){
fn.call(dom);
}
dom.attachEvent('on'+type,Transit);
}else{
dom['on'+type]=fn;
}
},
'remove':function(id,type,fn,isBubble){
vardom=document.getElementById(id);
if(!isBubble)isBubble=false;
if(dom.removeEventListenner){
dom.removeEventListenner(type,fn,isBubble)
}elseif(dom.detachEvent){
dom.detachEvent('on'+type,Transit)
}else{
dom['on'+type]=null;
}

}

}

调用方法：

?

1
2
3
4
5
6
7
8
9
10

//定义事件处理程序
functionmsg(){
alert(this.tagName)
}

//为目标元素绑定事件
bindEvent.add('link','click',msg,false);

//解除目标元素绑定的事件
bindEvent.remove('link','click',msg,false);

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： java 柠檬学院 javascript

相关文章推荐

新的分享

章节导航