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 相关文章推荐
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
Nov 27 Javascript
js导入导出excel(实例代码)
Nov 25 Javascript
javascript中Date对象的getDay方法使用指南
Dec 22 Javascript
JS延时提示框实现方法详解
Nov 26 Javascript
jQuery Easyui学习之datagrid 动态添加、移除editor
Jan 27 Javascript
jQuery链式调用与show知识浅析
May 11 Javascript
基于BootStrap Metronic开发框架经验小结【四】Bootstrap图标的提取和利用
May 12 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
妙用Angularjs实现表格按指定列排序
Jun 23 Javascript
给localStorage设置一个过期时间的方法分享
Nov 06 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
Sep 21 jQuery
Vue组件生命周期运行原理解析
Nov 25 Vue.js
老生常谈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
PHP4 与 MySQL 交互使用
2006/10/09 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
部署PHP项目应该注意的几点事项分享
2013/12/20 PHP
php+ajax无刷新分页实例详解
2015/12/07 PHP
在WordPress中实现发送http请求的相关函数解析
2015/12/29 PHP
PHP+MySQL统计该库中每个表的记录数并按递减顺序排列的方法
2016/02/15 PHP
JavaScript 对象、函数和继承
2009/07/07 Javascript
从零学JSON之JSON数据结构
2014/05/19 Javascript
js中for in语句的用法讲解
2015/04/24 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
2016/10/08 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
JavaScript 中Date对象的格式化代码方法汇总
2017/09/06 Javascript
nodejs实现的连接MySQL数据库功能示例
2018/01/25 NodeJs
vue.js计算属性computed用法实例分析
2018/07/06 Javascript
利用原生的JavaScript实现简单拼图游戏
2018/11/18 Javascript
微信小程序实现简单跑马灯效果
2020/05/26 Javascript
JSON的parse()方法介绍
2019/01/31 Javascript
PostgreSQL Node.js实现函数计算方法示例
2019/02/12 Javascript
jQuery Ajax async=&gt;false异步改为同步时,解决导致浏览器假死的问题
2019/07/22 jQuery
浅探express路由和中间件的实现
2019/09/30 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
Python下线程之间的共享和释放示例
2015/05/04 Python
python使用Image处理图片常用技巧分析
2015/06/01 Python
在Linux系统上安装Python的Scrapy框架的教程
2015/06/11 Python
利用Python2下载单张图片与爬取网页图片实例代码
2017/12/25 Python
浅谈Python中重载isinstance继承关系的问题
2018/05/04 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
在python中修改.properties文件的操作
2020/04/08 Python
在 Python 中使用 7zip 备份文件的操作
2020/12/11 Python
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
遗体告别仪式答谢词
2014/01/23 职场文书
就业推荐表院系意见
2015/06/05 职场文书
创业计划书之家政服务
2019/09/18 职场文书
MySQL基础快速入门知识总结(附思维导图)
2021/09/25 MySQL
python开发人人对战的五子棋小游戏
2022/05/02 Python