通过原生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 相关文章推荐
setTimeout和setInterval的浏览器兼容性分析
Feb 27 Javascript
JQuery筛选器全系列介绍
Aug 27 Javascript
100个不能错过的实用JS自定义函数
Mar 05 Javascript
IE及IE6浏览器中判断JS文件加载成功失败的方法
Feb 18 Javascript
JS实现图片高亮展示效果实例
Nov 24 Javascript
javascript与jquery中的this关键字用法实例分析
Dec 24 Javascript
JavaScript中获取纯正的undefined的方法
Mar 06 Javascript
JavaScript中的数组遍历forEach()与map()方法以及兼容写法介绍
May 19 Javascript
Node.js中.pfx后缀文件的处理方法
Mar 10 Javascript
DataTables添加额外的查询参数和删除columns等无用参数实例
Jul 04 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
JavaScript canvas绘制圆弧与圆形
Feb 18 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
在IIS上安装PHP4.0正式版
2006/10/09 PHP
php学习笔记 类的声明与对象实例化
2011/06/13 PHP
VPS中使用LNMP安装WordPress教程
2014/12/28 PHP
PHP中创建和编辑Excel表格的方法
2018/09/13 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
jquery中交替点击事件的实现代码
2014/02/14 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
js获取ajax返回值代码
2014/04/30 Javascript
jquery实现页面虚拟键盘特效
2015/08/08 Javascript
实例代码详解jquery.slides.js
2015/11/16 Javascript
基于jquery实现省市联动特效
2015/12/17 Javascript
JS获取子窗口中返回的数据实现方法
2016/05/28 Javascript
模拟javascript中的sort排序(简单实例)
2016/08/17 Javascript
nodejs爬虫遇到的乱码问题汇总
2017/04/07 NodeJs
ionic中的$ionicPlatform.ready事件中的通用设置
2017/06/11 Javascript
聊聊那些使用前端Javascript实现的机器学习类库
2017/09/18 Javascript
通过 JS 判断页面是否有滚动条的实现方法
2018/04/05 Javascript
全面分析JavaScript 继承
2019/05/30 Javascript
微信小程序自定义底部弹出框功能
2020/11/18 Javascript
JavaScript十大取整方法实例教程
2020/12/03 Javascript
python获取糗百图片代码实例
2013/12/18 Python
在Python中使用第三方模块的教程
2015/04/27 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python优化技巧之利用ctypes提高执行速度
2016/09/11 Python
python urllib urlopen()对象方法/代理的补充说明
2017/06/29 Python
python实现维吉尼亚加密法
2019/03/20 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
pycharm 添加解释器的方法步骤
2020/08/31 Python
Scrapy项目实战之爬取某社区用户详情
2020/09/17 Python
英文商务邀请信
2014/01/22 职场文书
乡镇一岗双责责任书
2015/01/29 职场文书
信访工作个人总结
2015/03/03 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
详解Redis基本命令与使用场景
2021/06/01 Redis