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

说明:

  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. nw.js FrameLess Window下的窗口拖拽与窗口大小控制

    nw.js FrameLess Window下的窗口拖拽与窗口大小控制 很多时候,我们觉得系统的Frame框很难看,于是想自定义. 自定义Frame的第一步是在package.config文件中将fr ...

  2. Hdoop日记Day10---RPC机制

    一.RPC(Remote Procedure Call)简介 RPC 是远程过程调用(Remote Procedure Call),即远程调用其他虚拟机中运行的javaobject.RPC 是一种客户 ...

  3. JavaScript开发原生App模式能否突出重围?

    移动应用制作的第三方服务市场已经被瓜分得差不多了,对于刚起步的中小企业来说,这些公司的 IT 部门人员比较熟悉的是 Appcan ,但随着互联网公司对 App 开发的需求持续升温,也有不少后来的闯入者 ...

  4. WPF 编辑状态切换

    有时候DataGrid编辑的时候一个属性需要根据别的属性呈现不同的编辑状态.这就需要一个做一个状态切换.比如地址是1的时候,读写类型是读写.只读.只写.地址是2的时候,就只读.状态栏切换为TextBo ...

  5. js模版引擎handlebars.js实用教程——如何引入Handlebars.js

    返回目录 Jquery插件,第一步当然要引用Jquery啦,然后引用Handlebars.js即可,仅仅需要这两个js文件. <script type="text/javascript ...

  6. Linux time命令

    说明:喜欢写小程序的人都特别注重自己程序的执行效率,那么在Linux上,就有一个time的命令,用于测量命令的运行时间,还可以测量内存.I/O等的使用情况. 一个程序在运行时使用的系统资源通常包括CP ...

  7. write/wall 1

    linux:/opt/software/lktest/c # wallhellllllllllllllllllllooooooooooooooooo^[[AasZZZZZZ^Clinux:/opt/s ...

  8. Oracle VM VirtualBox配置文件

    Linux 虚拟机配置文件分为两处. windows下: 1.用户名/.VirtualBox/ 这里面有2个配置文件: VirtualBox.xml 和 VirtualBox.xml-prev. 后面 ...

  9. PDO预处理

    方法:bool PDOStatement::execute ([ array $input_parameters ] ) 1.PDOStatement::execute不使用参数 01)单个绑定值(P ...

  10. php实现注册

    <?php header("Content-Type:text/html;charset=gb2312"); @mysql_connect('localhost','root ...