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


Posted in Javascript onNovember 23, 2016

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

说明:

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实现为元素添加事件的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript实现上传图片并预览的效果实现代码
Apr 11 Javascript
js中eval详解
Mar 30 Javascript
javascript 操作符(~、&、|、^、)使用案例
Dec 31 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
Aug 24 Javascript
基于jQuery倒计时插件实现团购秒杀效果
May 13 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
JavaScript 事件流、事件处理程序及事件对象总结
Apr 01 Javascript
解决ie img标签内存泄漏的问题
Oct 13 Javascript
Bootstrap 模态框多次显示后台提交多次BUG的解决方法
Dec 26 Javascript
详解使用Next.js构建服务端渲染应用
Jul 10 Javascript
vue.js实现双击放大预览功能
Jun 23 Javascript
微信小程序开发一键登录 获取session_key和openid实例
Nov 23 #Javascript
JavaScript基于自定义函数判断变量类型的实现方法
Nov 23 #Javascript
JavaScript实现的CRC32函数示例
Nov 23 #Javascript
JavaScript 控制字体大小设置的方法
Nov 23 #Javascript
微信小程序  wx.request合法域名配置详解
Nov 23 #Javascript
怎样判断jQuery当前元素是隐藏还是显示
Nov 23 #Javascript
自己封装的一个简单的倒计时功能实例
Nov 23 #Javascript
You might like
利用递归把多维数组转为一维数组的函数
2006/10/09 PHP
PDO::commit讲解
2019/01/27 PHP
兼容ie和firefox js关闭代码
2008/12/11 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
jQuery之尺寸调整组件的深入解析
2013/06/19 Javascript
js实现按一下删除键删除整个单词附demo
2014/09/05 Javascript
JS中字符串trim()使用示例
2015/05/26 Javascript
JS实现先显示大图后自动收起显示小图的广告代码
2015/09/04 Javascript
JavaScript数组操作函数汇总
2016/08/05 Javascript
AngularJs Understanding the Model Component
2016/09/02 Javascript
Bootstrap基本组件学习笔记之按钮组(8)
2016/12/07 Javascript
Bootstrap table两种分页示例
2016/12/23 Javascript
详解nodejs微信公众号开发——4.自动回复各种消息
2017/04/11 NodeJs
js实现股票实时刷新数据案例
2017/05/14 Javascript
javascript 缓冲运动框架的实现
2017/09/29 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
解决JavaScript中0.1+0.2不等于0.3问题
2018/10/23 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
JS实现从对象获取对象中单个键值的方法示例
2019/06/05 Javascript
解决layui 三级联动下拉框更新时回显的问题
2019/09/03 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
python中lambda函数 list comprehension 和 zip函数使用指南
2014/09/28 Python
python通过函数属性实现全局变量的方法
2015/05/16 Python
Django的URLconf中使用缺省视图参数的方法
2015/07/18 Python
Python2.7简单连接与操作MySQL的方法
2016/04/27 Python
Pyecharts绘制全球流向图的示例代码
2020/01/08 Python
HTML5实现锚点时请使用id取代name
2013/09/06 HTML / CSS
html5实现图片转圈的动画效果——让页面动起来
2017/10/16 HTML / CSS
经典优秀个人求职自荐信格式
2013/09/25 职场文书
幼儿园消防安全制度
2014/01/26 职场文书
2015年安全月活动总结
2015/03/26 职场文书
师德培训心得体会2016
2016/01/09 职场文书
学生会自荐信
2019/05/16 职场文书
如何用JavaScript学习算法复杂度
2021/04/30 Javascript
python-opencv 中值滤波{cv2.medianBlur(src, ksize)}的用法
2021/06/05 Python