通过原生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 相关文章推荐
深入document.write()与HTML4.01的非成对标签的详解
May 08 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
JS简单操作select和dropdownlist实例
Nov 26 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
Feb 26 Javascript
jquery简单实现带渐显效果的选项卡菜单代码
Sep 01 Javascript
全面解析JavaScript中apply和call以及bind(推荐)
Jun 15 Javascript
js实现图片淡入淡出切换简易效果
Aug 22 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
详解小程序input框失焦事件在提交事件前的处理
May 05 Javascript
p5.js实现动态图形临摹
Oct 23 Javascript
js正则匹配多个全部数据问题
Dec 20 Javascript
小程序自定义导航栏兼容适配所有机型(附完整案例)
Apr 26 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
基于laravel制作APP接口(API)
2016/03/15 PHP
PHP的Yii框架中创建视图和渲染视图的方法详解
2016/03/29 PHP
PHP函数shuffle()取数组若干个随机元素的方法分析
2016/04/02 PHP
Linux服务器下PHPMailer发送邮件失败的问题解决
2017/03/04 PHP
用JAVASCRIPT如何给<textarea></textarea>赋值
2007/04/20 Javascript
javascript 手动给表增加数据的小例子
2013/07/10 Javascript
深入理解JavaScript中的箭头函数
2015/07/28 Javascript
js实现随屏幕滚动的带缓冲效果的右下角广告代码
2015/09/04 Javascript
javascript巧用eval函数组装表单输入项为json对象的方法
2015/11/25 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
javascript基础知识之html5轮播图实例讲解(44)
2017/02/17 Javascript
深入浅出了解Node.js Streams
2019/05/27 Javascript
新手入门带你学习JavaScript引擎运行原理
2019/06/24 Javascript
Python利用Beautiful Soup模块修改内容方法示例
2017/03/27 Python
Python实现的删除重复文件或图片功能示例【去重】
2019/04/23 Python
Python图片的横坐标汉字实例
2019/12/04 Python
opencv3/Python 稠密光流calcOpticalFlowFarneback详解
2019/12/11 Python
使用python处理题库表格并转化为word形式的实现
2020/04/14 Python
Python图像阈值化处理及算法比对实例解析
2020/06/19 Python
Python定义一个Actor任务
2020/07/29 Python
Python环境使用OpenCV检测人脸实现教程
2020/10/19 Python
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
Melijoe英国官网:法国儿童时尚网站
2016/11/18 全球购物
全球第二大家装零售商:Lowe’s
2018/01/13 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
Linux面试经常问的文件系统操作命令
2016/10/04 面试题
地理科学专业毕业生求职信
2013/10/15 职场文书
采购主管的岗位职责
2013/12/17 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
大学生优秀班干部事迹材料
2014/05/26 职场文书
2015年健康教育工作总结
2015/04/10 职场文书
月考总结与反思
2015/10/22 职场文书
2016中秋节月饼促销广告语
2016/01/28 职场文书
Ajax实现局部刷新的方法实例
2021/03/31 Javascript
vue route新窗口跳转页面并且携带与接收参数
2022/04/10 Vue.js
MySQL实现用逗号进行拼接、以逗号进行分割
2022/12/24 MySQL