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 相关文章推荐
在页面上点击任一链接时触发一个事件的代码
Apr 07 Javascript
jquery实现带单选按钮的表格行选中时高亮显示
Aug 01 Javascript
js中的布尔运算符使用介绍
Nov 20 Javascript
上传图片js判断图片尺寸和格式兼容IE
Sep 01 Javascript
浅谈JavaScript 框架分类
Nov 10 Javascript
使用 stylelint检查CSS_StyleLint
Apr 28 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
vue+vue-router转场动画的实例代码
Sep 01 Javascript
puppeteer库入门初探
Jan 09 Javascript
JavaScript在web自动化测试中的作用示例详解
Aug 25 Javascript
JavaScript 预解析的4种实现方法解析
Sep 03 Javascript
JS表格的动态操作完整示例
Jan 13 Javascript
老生常谈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实现的mongodb操作类
2015/05/28 PHP
WordPress中缩略图的使用以及相关技巧
2015/11/24 PHP
Yii2中OAuth扩展及QQ互联登录实现方法
2016/05/16 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
JScript中使用ADODB.Stream判断文件编码的代码
2008/06/09 Javascript
ExtJs使用总结(非常详细)
2012/03/22 Javascript
js中将String转换为number以便比较
2014/07/08 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
2014/10/14 Javascript
Javascript中的call()方法介绍
2015/03/15 Javascript
JavaScript合并两个数组并去除重复项的方法
2015/06/13 Javascript
深入讲解AngularJS中的自定义指令的使用
2015/06/18 Javascript
Yarn的安装与使用详细介绍
2016/10/25 Javascript
js编写选项卡效果
2017/05/23 Javascript
Webpack打包css后z-index被重新计算的解决方法
2017/06/18 Javascript
解决Vue2.x父组件与子组件之间的双向绑定问题
2018/03/06 Javascript
vue 修改 data 数据问题并实时显示的方法
2018/08/27 Javascript
vue实现可视化可拖放的自定义表单的示例代码
2019/03/20 Javascript
vue实现多组关键词对应高亮显示功能
2019/07/25 Javascript
在vue中实现echarts随窗体变化
2020/07/27 Javascript
python下如何让web元素的生成更简单的分析
2008/07/17 Python
PHP webshell检查工具 python实现代码
2009/09/15 Python
在Python中使用HTMLParser解析HTML的教程
2015/04/29 Python
让Python代码更快运行的5种方法
2015/06/21 Python
Python中在脚本中引用其他文件函数的实现方法
2016/06/23 Python
Python通过Pygame绘制移动的矩形实例代码
2018/01/03 Python
详解Django+uwsgi+Nginx上线最佳实战
2019/03/14 Python
python七夕浪漫表白源码
2019/04/05 Python
Python高级特性 切片 迭代解析
2019/08/23 Python
python数据预处理方式 :数据降维
2020/02/24 Python
Python range与enumerate函数区别解析
2020/02/28 Python
python 合并多个excel中同名的sheet
2021/01/22 Python
应届毕业生自荐信例文
2014/02/26 职场文书
企业委托书范本
2014/09/13 职场文书
教师培训学习心得体会
2016/01/21 职场文书
JavaScript 语句之常用 for 循环详解
2021/03/29 Javascript