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 相关文章推荐
电子商务网站上的常用的js放大镜效果
Dec 08 Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 Javascript
replace()方法查找字符使用示例
Oct 28 Javascript
javascript实现获取cookie过期时间的变通方法
Aug 14 Javascript
用js编写的简单的计算器代码程序
Aug 04 Javascript
jquery判断当前浏览器的实现代码
Nov 07 Javascript
如何使用jquery easyui创建标签组件
Nov 18 Javascript
模仿password输入框的实现代码
Jun 07 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
AngularJS使用ng-class动态增减class样式的方法示例
May 18 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
vue源码nextTick使用及原理解析
Aug 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执行linux系统命令的常用函数使用说明
2010/04/27 PHP
解析如何用php screw加密php源代码
2013/06/20 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
PHP swoole和redis异步任务实现方法分析
2019/08/12 PHP
PJ Blog修改-禁止复制的代码和方法
2006/10/25 Javascript
javascript getElementsByTagName
2011/01/31 Javascript
JS+CSS实现一个气泡提示框
2013/08/18 Javascript
让IE8浏览器支持function.bind()方法
2014/10/16 Javascript
JS使用post提交的两种方式
2015/12/03 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
mongoose中利用populate处理嵌套的方法
2017/05/26 Javascript
JavaScript实现提交模式窗口后刷新父窗口数据的方法
2017/06/16 Javascript
JS实现带动画的回到顶部效果
2017/12/28 Javascript
解决Vue.js父组件$on无法监听子组件$emit触发事件的问题
2018/09/12 Javascript
js中innerText/textContent和innerHTML与target和currentTarget的区别
2019/01/21 Javascript
使用express来代理服务的方法
2019/06/21 Javascript
JS实现百度搜索框关键字推荐
2020/02/17 Javascript
云服务器部署Node.js项目的方法步骤(小白系列)
2020/03/23 Javascript
在vue中封装方法以及多处引用该方法详解
2020/08/14 Javascript
[01:11]辉夜杯战队访谈宣传片—CDEC.Y
2015/12/26 DOTA
Python文件右键找不到IDLE打开项解决办法
2015/06/08 Python
Python线程指南详细介绍
2017/01/05 Python
利用Python爬虫给孩子起个好名字
2017/02/14 Python
MAC中PyCharm设置python3解释器
2017/12/15 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
python实现随机漫步算法
2018/08/27 Python
pytorch对梯度进行可视化进行梯度检查教程
2020/02/04 Python
CSS实现聊天气泡效果
2020/04/26 HTML / CSS
美体小铺法国官方网站:The Body Shop法国
2020/06/04 全球购物
党课学习思想汇报
2014/01/02 职场文书
小学生演讲稿大全
2014/04/25 职场文书
区级文明单位申报材料
2014/05/15 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
给老婆的保证书怎么写
2015/05/08 职场文书
2019军训心得体会
2019/06/27 职场文书
七年级作文之英语老师
2019/10/28 职场文书