通过原生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 相关文章推荐
通过pjax实现无刷新翻页(兼容新版jquery)
Jan 31 Javascript
JavaScript实现存储HTML字符串示例
Apr 21 Javascript
jquery防止重复执行动画避免页面混乱
Apr 22 Javascript
Javascript+CSS实现影像卷帘效果思路及代码
Oct 20 Javascript
jQuery Ajax页面局部加载方法汇总
Jun 02 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
微信小程序scroll-view组件实现滚动动画
Jan 31 Javascript
React native ListView 增加顶部下拉刷新和底下点击刷新示例
Apr 27 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
JS变量提升原理与用法实例浅析
May 22 Javascript
LayUI+Shiro实现动态菜单并记住菜单收展的示例
May 06 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时间不正确的解决方法
2008/04/09 PHP
php面向对象的方法重载两种版本比较
2008/09/08 PHP
PHP goto语句简介和使用实例
2014/03/11 PHP
php遍历删除整个目录及文件的方法
2015/03/13 PHP
php gd等比例缩放压缩图片函数
2016/06/12 PHP
php阳历转农历优化版
2016/08/08 PHP
JavaScript 类似flash效果的立体图片浏览器
2010/02/08 Javascript
我的javascript 函数链之演变
2011/04/07 Javascript
读jQuery之十一 添加事件核心方法
2011/07/31 Javascript
js function定义函数的几种不错方法
2014/02/27 Javascript
浅析Javascript的自动分号插入(ASI)机制
2016/09/29 Javascript
js上传图片预览的实现方法
2017/05/09 Javascript
javascript实现二叉树的代码
2017/06/08 Javascript
详解AngularJS跨页面传值(ui-router)
2017/08/23 Javascript
jquery实现聊天机器人
2020/02/08 jQuery
JavaScript常用工具函数汇总(浏览器环境)
2020/09/17 Javascript
Vue实现小购物车功能
2020/12/21 Vue.js
Python模块学习 datetime介绍
2012/08/27 Python
深入浅析python继承问题
2016/05/29 Python
利用Python命令行传递实例化对象的方法
2016/11/02 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
Python使用folium excel绘制point
2019/01/03 Python
Python实现生成密码字典的方法示例
2019/09/02 Python
如何通过Django使用本地css/js文件
2020/01/20 Python
Python 通过爬虫实现GitHub网页的模拟登录的示例代码
2020/08/17 Python
Python 使用Opencv实现目标检测与识别的示例代码
2020/09/08 Python
新西兰第一的行李箱网站:luggage.co.nz
2019/07/22 全球购物
毕业生求职简历中的自我评价
2013/10/18 职场文书
军训考核自我鉴定
2014/02/13 职场文书
创先争优标语
2014/06/27 职场文书
2014医学院领导班子对照检查材料思想汇报
2014/09/19 职场文书
工作汇报开头与结尾怎么写
2014/11/08 职场文书
2014年团支部工作总结
2014/11/17 职场文书
2014年妇联工作总结
2014/11/21 职场文书
财务出纳岗位职责
2015/03/31 职场文书
如何利用golang运用mysql数据库
2022/03/13 Golang