自己写了一个为元素添加事件的方法,并封装到对象中。

说明:

  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实现为元素添加事件的更多相关文章

  1. 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

    使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件

  2. 给DOM生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  3. 给Jquery动态添加的元素添加事件

    给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...

  4. [转载]给Jquery动态添加的元素添加事件

    原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...

  5. 给DOM操作生成的元素添加事件

    问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...

  6. 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题

    1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...

  7. Js为Dom元素绑定事件须知

    为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...

  8. Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

  9. JS笔记 - JQ事件委托( 适用于给动态生成的脚本元素添加事件)

    最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...

随机推荐

  1. jQuery.width()和jQuery.css('width')的区别

    [TOC] 问题描述 使用jQuery修改一个div的宽度时,发现$($0).width('10rem')总是修改成不正确的值,然后使用$($0).css('width', '10rem')时却能正确 ...

  2. EF架构~通过EF6的DbCommand拦截器来实现数据库读写分离~续~添加事务机制

    回到目录 上一讲中简单介绍了一个EF环境下通过DbCommand拦截器来实现SQLSERVER的读写分离,只是一个最简单的实现,而如果出现事务情况,还是会有一些问题的,因为在拦截器中我们手动开启了Co ...

  3. React(三)组件的生命周期

    Component Specs and LifeCycle <div id="app"></div> <script src="bower_ ...

  4. KendoUI系列:TabStrip

    <link href="@Url.Content("~/Content/kendo/2014.1.318/kendo.common.min.css")" ...

  5. WPF combobox

    先写一个数据类Grade.cs using System; using System.Collections.Generic; using System.Linq; using System.Text ...

  6. JAVA设计模式《三》

    上一篇为大家介绍了一下关于模板方法模式的实现,后来我发现里面有一点小瑕疵,本篇重新为大家介绍一下关于模板方法模式的实现.另外为大家分享一下关于策略模式的实现. 一.模板方法模式: 对于上一篇为大家介绍 ...

  7. java 模拟qq源码

    java 模拟qq源码: http://files.cnblogs.com/files/hujunzheng/QQ--hjzgg.zip

  8. nyoj 925 国王的烦恼(最小生成树)

    /* 题意:N个城市中每两个城市有多条路径连接,可是因为路径存在的天数是有限的!以为某条路经不存在了 导致N个城市不能连通了,那么村名们就会抗议!问一共会有多少次抗议! 思路:最小生成树....我们用 ...

  9. Java多线程系列--“基础篇”04之 synchronized关键字

    概要 本章,会对synchronized关键字进行介绍.涉及到的内容包括:1. synchronized原理2. synchronized基本规则3. synchronized方法 和 synchro ...

  10. WebStorm 9 自动编译 SCSS 产出 CSS 和 source maps

    1.  上一节我们学习了Windows下搭建Ruby开发环境,也为这一节的学习做了铺垫.因为本节需要在Ruby环境下安装SASS.详细请见:http://www.cnblogs.com/wind128 ...