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 相关文章推荐
javascript 跳转代码集合
Dec 03 Javascript
两种常用的javascript数组去重方法思路及代码
Mar 26 Javascript
关于JavaScript与HTML的交互事件
Apr 12 Javascript
JQuery中两个ul标签的li互相移动实现方法
May 18 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
jquery自定义表格样式
Nov 23 Javascript
node.js插件nodeclipse安装图文教程
Oct 19 Javascript
详解vue+webpack+express中间件接口使用
Jul 17 Javascript
解决vue-cli3 使用子目录部署问题
Jul 19 Javascript
js new Date()实例测试
Oct 31 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 Javascript
解决vue-cli输入命令vue ui没效果的问题
Nov 17 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
解决Laravel blade模板转义html标签的问题
2019/09/03 PHP
用jquery与css打造个性化的单选框和复选框
2010/10/20 Javascript
使用jQuery实现dropdownlist的联动效果(sharepoint 2007)
2011/03/30 Javascript
实例讲解JavaScript中的this指向错误解决方法
2016/06/13 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
详解Angular 中 ngOnInit 和 constructor 使用场景
2017/06/22 Javascript
解决vue2.x中数据渲染以及vuex缓存的问题
2017/07/13 Javascript
关于预加载InstantClick的问题解决方法
2017/09/12 Javascript
Vue.js2.0中的变化小结
2017/10/24 Javascript
vue cli 3.0 使用全过程解析
2018/06/14 Javascript
React之PureComponent的使用作用
2018/07/10 Javascript
深入理解Node内建模块和对象
2019/03/12 Javascript
ES6中定义类和对象的方法示例
2019/07/31 Javascript
Nuxt v-bind绑定img src不显示的解决
2019/12/05 Javascript
详细分析vue响应式原理
2020/06/22 Javascript
微信小程序实现列表左右滑动
2020/11/19 Javascript
python自动格式化json文件的方法
2015/03/11 Python
Python切片知识解析
2016/03/06 Python
python中星号变量的几种特殊用法
2016/09/07 Python
Python查询IP地址归属完整代码
2017/06/21 Python
一看就懂得Python的math模块
2018/10/21 Python
python Event事件、进程池与线程池、协程解析
2019/10/25 Python
python如何输出反斜杠
2020/06/18 Python
sklearn和keras的数据切分与交叉验证的实例详解
2020/06/19 Python
解决Keras使用GPU资源耗尽的问题
2020/06/22 Python
HTML5安全介绍之内容安全策略(CSP)简介
2012/07/10 HTML / CSS
解决html5中的video标签ios系统中无法播放使用的问题
2020/08/10 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
《难忘的泼水节》教学反思
2014/02/27 职场文书
人民教师求职自荐信
2014/03/12 职场文书
校园安全演讲稿
2014/05/09 职场文书
会计工作岗位职责
2015/02/03 职场文书
班主任开场白
2015/06/01 职场文书
优秀范文:《但愿人长久》教学反思3篇
2019/10/24 职场文书
解决Golang中ResponseWriter的一个坑
2021/04/27 Golang
SQL基础查询和LINQ集成化查询
2022/01/18 MySQL