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

时间:2016-11-23    点击:145   

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

说明:

id : 目标元素的ID

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

fn:事件处理程序

isBubble :规定事件流

代码:

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;
      }

    }

  }

调用方法:

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

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

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

以上这篇通过原生JS实现为元素添加事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持本站。

移动开发之自适应手机屏幕宽度
js获取当前时间(昨天、今天、明天)
JQuery和PHP结合实现动态进度条上传显示
ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案
JQueryEasyUI之DataGrid数据显示
> 返回     
地址:上海市普陀区胶州路941号长久商务中心 电话: QQ:
© Copyright 2012 上海网络 Product All Rights Reserved