通过原生JS实现为元素添加事件
自己写了一个为元素添加事件的方法,并封装到对象中。
说明:
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实现为元素添加事件的更多相关文章
- 使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
使用js主函数的原因是等文档加载完了才给里面的元素添加东西 如果不使用主函数则文档加载时候无法找到元素则不能成功给元素添加事件
- 给DOM生成的元素添加事件
问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...
- 给Jquery动态添加的元素添加事件
给Jquery动态添加的元素添加事件 来源:[http://wangqixia.diandian.com/post/2011-05-10/6597866] 我想很多人都会向我一样曾经 被新元素的事件绑 ...
- [转载]给Jquery动态添加的元素添加事件
原文地址:给Jquery动态添加的元素添加事件作者:小飞侠 我想很多人都会向我一样曾经 被新元素的事件绑定困惑很久也就是在页面加载完成后给元素绑定了事件,但又新增加的元素上却没有绑定任何事件. js的 ...
- 给DOM操作生成的元素添加事件
问题:通过js给页面添加新元素,并给该元素添加绑定事件,但新添加的元素上却没有绑定任何事件. 常见例子:在处理表格的时候,每行行末有个删除按钮,如下图.点击删除按钮的时候删除这一行. //html部分 ...
- 关于Echarts的原生js获取DOM元素与动态加载DOM元素的冲突问题
1.前言: 最近在做的看板项目,因为需要循环加载后台数据,并且用Echarts做数据呈现,所以jQuery和angular等库统统靠边站,Echarts用的是原生js获取DOM元素,至于诸多不兼容等深 ...
- Js为Dom元素绑定事件须知
为异步加载的Dom 元素绑定事件必须在加载完成之后绑定: $('body').load('LearnClickBinding.ashx');$('a').click(function () { ale ...
- Js - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...
- JS笔记 - JQ事件委托( 适用于给动态生成的脚本元素添加事件)
最近一段时间打了一个大仗,现在总算消停点,才有时间来做个总结吧算是: 移动端遇到一个项目,是一个列表的侧滑栏,在我这里用jq写的交互事件.自测各方面都挺好的,美滋滋的给了研发.研发也美滋滋的开始开发. ...
随机推荐
- (转)解释一下SQLSERVER事务日志记录
本文转载自桦仔的博客http://www.cnblogs.com/lyhabc/archive/2013/07/16/3194220.html 解释一下SQLSERVER事务日志记录 大家知道在完整恢 ...
- STC12C5A60S2笔记4(复位)
1. 基本特性 STC 单片机有5种复位方式: 1) 热启动复位: 1.1)外部RST引脚复位 第一功能复位脚,即管脚9 RST/P4.7,该管脚拉高维持24个时钟周期+10ms后,单片机进入复位状态 ...
- Win10 UWP应用发布流程
简介 Win10 UWP应用作为和Win8.1 UAP应用不同的一种新应用形式,其上传至Windows应用商店的流程也有了一些改变. 这篇博文记录了我们发布一款Win10 UWP应用的基本流程,希望为 ...
- 新手的第一个phonegap Android应用
对PhoneGap开发感兴趣的请加入群 PhoneGap App开发 348192525 手机成为现在软件应用必不可少的一种设备,然而手机平台的不统一造成我们需要为不同手机重写代码,这对一般应用来 ...
- 003. Asp.Net Routing与MVC 之一: 请求如何到达MVC
基础知识 本文用到的基础知识:URL.HttpModule 与 HttpHandler.IIS 的请求处理过程. URL HttpModule与HttpHandler IIS7.0的请求处理过程 OK ...
- 浅谈Excel开发:五 Excel RTD函数
上文介绍了Excel中的UDF函数,本文介绍一下同样重要的RTD函数.从Excel 2002开始,Excel引入了一种新的查看和更新实时数据的机制,即real-time data简称RTD函数 ...
- 深入探究js中无所不在的this
黄金守则: this对象是在运行时基于函数的执行环境绑定的:在全局函数中,this等于window而当函数被作为某个对象的方法调用时, this等于那个对象. 下面是一些相关实践: --------- ...
- mvc项目controller重命名了,用原网页url访问不了了,怎么办?
如题.MVC项目,手机网站. 公司的官方微信上,用户关注之后,点击相应菜单就可以使用相关的功能. 最近项目重构,有些不规范的命名方式给予了重构.上线后,微信上发现一些网页访问不了了. 联系微信的维护人 ...
- 我心中的核心组件(可插拔的AOP)~第六回 消息组件~续
回到目录 上一回写消息组件已经是很久之前的事了,这一次准备把消息组件后续的东西说一下,事实上,第一篇文章主要讲的是发消息,而这一讲最要讲的是收消息,简单的说,就是消息到了服务器之后,如何从服务器实时的 ...
- 知方可补不足~sqlserver中触发器的使用
回到目录 触发器在过去的10年中,即存储过程和ado.net称霸江湖期间是那么的重要,而现在,trigger显得不是那么必要的,我们很少将复杂的业务写在SQL里,当然也会没有机会写到trigger里了 ...