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 高级语法介绍
Jun 15 Javascript
jQuery Ajax之load()方法
Oct 12 Javascript
flash遮住div问题的正确解决方法
Feb 27 Javascript
JavaScript reduce和reduceRight详解
Oct 24 Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
微信小程序 动画的简单实例
Oct 12 Javascript
vue 引入公共css文件的简单方法(推荐)
Jan 20 Javascript
解决vue.js this.$router.push无效的问题
Sep 03 Javascript
vue-router 手势滑动触发返回功能
Sep 30 Javascript
js实现整体缩放页面适配移动端
Mar 31 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 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.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
javascript attachEvent和addEventListener使用方法
2009/03/19 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
JavaScript html5 canvas绘制时钟效果(二)
2016/03/27 Javascript
requireJS使用指南
2016/04/27 Javascript
网络传输协议(http协议)
2016/11/18 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
使用node.js搭建服务器
2017/05/20 Javascript
Vue-Router进阶之滚动行为详解
2017/09/13 Javascript
angular中ui calendar的一些使用心得(推荐)
2017/11/03 Javascript
JS实现头条新闻的经典轮播图效果示例
2019/01/30 Javascript
微信小程序实现简单表格
2019/02/14 Javascript
js实现无限层级树形数据结构(创新算法)
2020/02/27 Javascript
JavaScript enum枚举类型定义及使用方法
2020/05/15 Javascript
JavaScript实现10秒后再次获取验证码
2020/12/02 Javascript
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
简单解析Django框架中的表单验证
2015/07/17 Python
pytorch permute维度转换方法
2018/12/14 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Django实现图片上传功能步骤解析
2020/04/22 Python
英国在线泳装店:Simply Swim
2019/05/05 全球购物
Yahoo-PHP面试题3
2012/01/14 面试题
中专生自我鉴定书范文
2013/12/28 职场文书
升学宴主持词
2014/04/02 职场文书
道德之星事迹材料
2014/05/03 职场文书
乡镇消防安全责任书
2014/07/23 职场文书
高中运动会广播稿
2014/09/16 职场文书
四风问题对照检查整改措施思想报告
2014/10/05 职场文书
2014财务部年度工作总结
2014/12/08 职场文书
Java中的随机数Random
2022/03/17 Java/Android