JS动态给对象添加事件的简单方法


Posted in Javascript onJuly 19, 2016

WEB项目中,我们常常会碰到要动态对相应的对象添加事件,如下,有id="txtPrice"的文本框控件:

<div>
  <input type="text" id="txtPrice" name = "txtPrice" value = "0"/>
 <div>

现在我们为其动态添加一事件,JS核心代码如下:

document.getElementById("txtPrice").attachEvent('onblur', function (){alert('添加事件成功!')});

【补充】

有时候为了实现不同浏览器之前的兼容,我们会这样写:

Code highlighting produced by Actipro CodeHighlighter (freeware)http://www.CodeHighlighter.com/-->1 if(window.attachEvent)
{
  document.getElementById("txtPrice").attachEvent('onblur', function (){alert('添加事件成功!')});      
}
else
{  
  document.getElementById("txtPrice").addEventListener('onblur', function (){alert('添加事件成功!')},false);
}

以上这篇JS动态给对象添加事件的简单方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
通过JAVASCRIPT读取ASP设定的COOKIE
Feb 15 Javascript
cument.execCommand()用法深入理解
Dec 04 Javascript
JS的document.all函数使用示例
Dec 30 Javascript
chrome浏览器当表单自动填充时如何去除浏览器自动添加的默认样式
Oct 09 Javascript
深入解析桶排序算法及Node.js上JavaScript的代码实现
Jul 06 Javascript
Node.js的Mongodb使用实例
Dec 30 Javascript
微信小程序 判断手机号的实现代码
Apr 19 Javascript
AngularJS封装$http.post()实例详解
May 06 Javascript
详解TypeScript+Vue 插件 vue-class-component的使用总结
Feb 18 Javascript
vue路由 遍历生成复数router-link的例子
Oct 30 Javascript
jQuery实现评论模块
Aug 19 jQuery
老生常谈js动态添加事件--- 事件委托
Jul 19 #Javascript
Bootstrap表单布局
Jul 19 #Javascript
一次$.getJSON不执行的简单记录
Jul 19 #Javascript
深入浅析javascript中的作用域(推荐)
Jul 19 #Javascript
javascript弹出带文字信息的提示框效果
Jul 19 #Javascript
总结在前端排序中遇到的问题
Jul 19 #Javascript
ECMAScript6快速入手攻略
Jul 18 #Javascript
You might like
社区(php&amp;&amp;mysql)二
2006/10/09 PHP
PHP采用get获取url汉字出现乱码的解决方法
2014/11/13 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
php compact 通过变量创建数组
2016/11/15 PHP
PHP简单实现模拟登陆功能示例
2017/09/15 PHP
在chrome中window.onload事件的一些问题
2010/03/01 Javascript
php上传图片并给图片打上透明水印的代码
2010/06/07 Javascript
分享几个超级震憾的图片特效
2012/01/08 Javascript
javascript 实现键盘上下左右功能的小例子
2013/09/15 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
Javascript基础教程之数据类型 (数值 Number)
2015/01/18 Javascript
分享十五款 jQuery 社交网络分享插件
2015/05/16 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
JavaScript中的some()方法使用详解
2015/06/09 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
基于 Vue 的树形选择组件的示例代码
2017/08/18 Javascript
angularJs中$http获取后台数据的实例讲解
2018/08/08 Javascript
解决layer弹层遮罩挡住窗体的问题
2018/08/17 Javascript
如何将HTML字符转换为DOM节点并动态添加到文档中详解
2018/08/19 Javascript
JS 遍历 json 和 JQuery 遍历json操作完整示例
2019/11/11 jQuery
基于JavaScript判断两个对象内容是否相等
2020/01/10 Javascript
vue实现前端列表多条件筛选
2020/10/26 Javascript
在Python的Flask框架下使用sqlalchemy库的简单教程
2015/04/09 Python
详解Python中for循环的使用
2015/04/14 Python
对pandas中两种数据类型Series和DataFrame的区别详解
2018/11/12 Python
Django中间件基础用法详解
2019/07/18 Python
python实现飞机大战小游戏
2019/11/08 Python
html5弹跳球示例代码
2013/07/23 HTML / CSS
彪马日本官网:PUMA日本
2019/01/31 全球购物
教师节倡议书
2014/08/30 职场文书
法人授权委托书公证范本
2014/09/14 职场文书
2014年高中生自我评价范文
2014/09/26 职场文书
拾金不昧表扬稿
2015/01/16 职场文书
中秋客户感谢信
2015/01/22 职场文书
2015年护理工作总结范文
2015/04/03 职场文书
JavaScript 事件捕获冒泡与捕获详情
2021/11/11 Javascript