通过原生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 无提示关闭窗口脚本
Aug 17 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
Jul 11 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
js实现日历与定时器
Feb 22 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
Apr 22 Javascript
Kotlin学习第一步 kotlin语法特性
May 25 Javascript
JS实现图片放大镜插件详解
Nov 06 Javascript
angular4 JavaScript内存溢出问题
Mar 06 Javascript
JavaScript中的相等操作符使用详解
Dec 21 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
vue cli4.0项目引入typescript的方法
Jul 17 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接口与接口引用的深入解析
2013/08/09 PHP
PHP学习笔记(二) 了解PHP的基本语法以及目录结构
2014/08/04 PHP
php实现基于微信公众平台开发SDK(demo)扩展的方法
2014/12/22 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
PHP convert_uudecode()函数讲解
2019/02/14 PHP
css配合jquery美化 select
2013/11/29 Javascript
javascript设计模式之中介者模式Mediator
2014/12/30 Javascript
JS实现漂亮的淡蓝色滑动门效果代码
2015/09/23 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
jquery实现倒计时功能
2015/12/28 Javascript
浅谈javascript中遇到的字符串对象处理
2016/11/18 Javascript
js控制文本框禁止输入特殊字符详解
2017/04/07 Javascript
深入理解ES6学习笔记之块级作用域绑定
2017/08/19 Javascript
node.js连接mysql与基本用法示例
2019/01/05 Javascript
Promise扫盲贴
2019/06/24 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
Python标准库urllib2的一些使用细节总结
2015/03/16 Python
Python实现批量将word转html并将html内容发布至网站的方法
2015/07/14 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python实现的简单dns查询功能示例
2017/05/24 Python
利用Python查看目录中的文件示例详解
2017/08/28 Python
pandas apply 函数 实现多进程的示例讲解
2018/04/20 Python
Python根据服务获取端口号的方法
2019/09/25 Python
Python统计文本词汇出现次数的实例代码
2020/02/27 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
结婚喜宴主持词
2014/03/14 职场文书
我们的节日清明节活动总结
2014/04/30 职场文书
大学生党员个人剖析材料
2014/10/08 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
一年级数学上册复习计划
2015/01/17 职场文书
诉讼和解协议书
2016/03/23 职场文书
SpringBoot详解整合Redis缓存方法
2022/07/15 Java/Android