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 可以拖动的DIV(二)
Jun 26 Javascript
JavaScript 嵌套函数指向this对象错误的解决方法
Mar 15 Javascript
jQuery循环滚动新闻列表示例代码
Jun 17 Javascript
原生JS绑定滑轮滚动事件兼容常见浏览器
Jun 30 Javascript
js使用递归解析xml
Dec 12 Javascript
jQuery简单实现禁用右键菜单
Mar 10 Javascript
Vuejs 组件——props数据传递的实例代码
Mar 07 Javascript
将input框中输入内容显示在相应的div中【三种方法可选】
May 08 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
原生js实现3D轮播图
Mar 21 Javascript
vue.js实现图书管理功能
Sep 24 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实现手机归属地查询API接口实现代码
2012/08/27 PHP
基于PHP服务端图片生成缩略图的方法详解
2013/06/20 PHP
php实现登录tplink WR882N获取IP和重启的方法
2016/07/20 PHP
PHP 二级子目录(后台目录)设置二级域名
2017/03/02 PHP
Jquery Ajax学习实例7 Ajax所有过程事件分析示例
2010/03/23 Javascript
javascript中window.open在原来的窗口中打开新的窗口(不同名)
2015/11/15 Javascript
Bootstrap3下拉菜单的实现
2017/02/22 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
在vue里面设置全局变量或数据的方法
2018/03/09 Javascript
详解一次Vue低版本安卓白屏问题的解决过程
2019/05/30 Javascript
Node.js fs模块(文件模块)创建、删除目录(文件)读取写入文件流的方法
2019/09/03 Javascript
Python获取脚本所在目录的正确方法
2014/04/15 Python
Python中的数据对象持久化存储模块pickle的使用示例
2016/03/03 Python
python django使用haystack:全文检索的框架(实例讲解)
2017/09/27 Python
python实现多线程行情抓取工具的方法
2018/02/28 Python
python中使用ctypes调用so传参设置遇到的问题及解决方法
2019/06/19 Python
django使用admin站点上传图片的实例
2019/07/28 Python
PyTorch中 tensor.detach() 和 tensor.data 的区别详解
2020/01/06 Python
python手写均值滤波
2020/02/19 Python
详解pandas中iloc, loc和ix的区别和联系
2020/03/09 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
从0到1使用python开发一个半自动答题小程序的实现
2020/05/12 Python
Python设计密码强度校验程序
2020/07/30 Python
HTML5所有标签汇总及标签意义解释
2015/03/12 HTML / CSS
美国一家运动专业鞋类零售商:Warehouse Shoe Sale(WSS)
2018/03/28 全球购物
Luxplus丹麦:香水和个人护理折扣
2018/04/23 全球购物
法国足球商店:Footcenter
2019/07/06 全球购物
英语专业学子个人的自我评价
2013/10/02 职场文书
学术会议主持词
2014/03/17 职场文书
《学会合作》教学反思
2014/04/12 职场文书
内科护士节演讲稿
2014/09/11 职场文书
铣工实训报告
2014/11/05 职场文书
2015年网管个人工作总结
2015/05/22 职场文书
2015年食品安全宣传周活动总结
2015/07/09 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android