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 24 Javascript
JS操作Cookies的小例子
Oct 15 Javascript
购物车选中得到价格实现示例
Jan 26 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
jQuery+Pdo编写login登陆界面
Aug 01 Javascript
关于BootStrap modal 在IOS9中不能弹出的解决方法(IOS 9 bootstrap modal ios 9 noticework)
Dec 14 Javascript
关于Vue组件库开发详析
Jul 01 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
vue 中 elment-ui table合并上下两行相同数据单元格
Dec 26 Javascript
vue-quill-editor的使用及个性化定制操作
Aug 04 Javascript
快速解决element的autofocus失效问题
Sep 08 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 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
thinkphp隐藏index.php/home并允许访问其他模块的实现方法
2016/10/13 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
用js闭包的方法实现多点标注冒泡示例
2014/05/29 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
JavaScript中removeChild 方法开发示例代码
2016/08/15 Javascript
webix+springmvc session超时跳转登录页面
2016/10/30 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
微信小程序 两种滑动方式(横向滑动,竖向滑动)详细及实例代码
2017/01/13 Javascript
jQuery使用方法
2017/02/04 Javascript
js 倒计时(高效率服务器时间同步)
2017/09/12 Javascript
详解node nvm进行node多版本管理
2017/10/21 Javascript
layui 表格的属性的显示转换方法
2018/08/14 Javascript
Vue加载json文件的方法简单示例
2019/01/28 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
maptalks+three.js+vue webpack实现二维地图上贴三维模型操作
2020/08/10 Javascript
Python的Tornado框架实现图片上传及图片大小修改功能
2016/06/30 Python
Python使用三种方法实现PCA算法
2017/12/12 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python matplotlib画曲线例题解析
2020/02/07 Python
Python创建空列表的字典2种方法详解
2020/02/13 Python
聊聊python中的异常嵌套
2020/09/01 Python
Python SQLAlchemy库的使用方法
2020/10/13 Python
python 用Matplotlib作图中有多个Y轴
2020/11/28 Python
python基于openpyxl生成excel文件
2020/12/23 Python
python爬虫利用代理池更换IP的方法步骤
2021/02/21 Python
巴西最好的男鞋:Rafarillo
2018/05/25 全球购物
Notino罗马尼亚网站:购买香水和化妆品
2019/07/20 全球购物
LUISAVIAROMA中国官网:时尚奢侈品牌购物网站
2020/11/01 全球购物
交通事故赔偿协议书怎么写
2014/10/04 职场文书
演讲比赛通讯稿
2015/07/18 职场文书
小学教师师德培训心得体会
2016/01/09 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
matplotlib如何设置坐标轴刻度的个数及标签的方法总结
2021/06/11 Python