通过原生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 相关文章推荐
中文字符串截取的js函数代码
Apr 17 Javascript
javascript中不等于的代码是什么怎么写
Dec 29 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
原生js实现jquery函数animate()动画效果的简单实例
Aug 21 Javascript
angularjs路由传值$routeParams详解
Sep 05 Javascript
Vue打包后出现一些map文件的解决方法
Feb 13 Javascript
react项目如何使用iconfont的方法步骤
Mar 13 Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 Javascript
vue实现防抖的实例代码
Jan 11 Vue.js
js基于canvas实现时钟组件
Feb 07 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
适用于php-5.2 的 php.ini 中文版[金步国翻译]
2011/04/17 PHP
PHP中file_exists与is_file,is_dir的区别介绍
2012/09/12 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
深入PHP autoload机制的详解
2013/06/09 PHP
PHP加密解密字符串汇总
2015/04/26 PHP
PHP数据库连接mysql与mysqli对比分析
2016/01/04 PHP
Javascript实例教程(19) 使用HoTMetal(1)
2006/12/23 Javascript
filemanage功能中用到的lib.js
2007/04/08 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
2009/08/09 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
基于JQuery的cookie插件
2010/04/07 Javascript
原生js实现复制对象、扩展对象 类似jquery中的extend()方法
2014/08/30 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
JavaScript常用小技巧小结
2014/12/29 Javascript
javascript清空table表格的方法
2015/05/14 Javascript
JS实现网页Div层Clone拖拽效果
2015/09/26 Javascript
快速掌握Node.js之Window下配置NodeJs环境
2016/03/21 NodeJs
JavaScript中的this使用详解
2016/07/27 Javascript
JS+canvas绘制的动态机械表动画效果
2017/09/12 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
详解Vue CLI3 多页应用实践和源码设计
2018/08/30 Javascript
Vue组件Draggable实现拖拽功能
2018/12/01 Javascript
jQuery 选择器用法实例分析【prev + next】
2020/05/22 jQuery
python 实现登录网页的操作方法
2018/05/11 Python
python实现一次性封装多条sql语句(begin end)
2020/06/06 Python
Ellos丹麦:时尚和服装在线
2016/09/19 全球购物
凯撒娱乐:Caesars Entertainment
2018/02/23 全球购物
小米俄罗斯授权商店:Xiaomi俄罗斯
2019/12/08 全球购物
香港士多网上超级市场:Ztore
2021/01/09 全球购物
酒店保洁主管岗位职责
2013/11/28 职场文书
中餐厅主管的职责范文
2014/02/04 职场文书
仓库管理员岗位职责
2015/02/03 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
党员干部学法用法心得体会
2016/01/21 职场文书
铁头也玩根德 YachtBoy YB-230......
2022/04/05 无线电
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python