js动态添加的DIV中的onclick事件简单实例


Posted in Javascript onJuly 25, 2016

最简单的是这样:

<input type="button" onclick="alert(this.value)" value="我是 button" />

动态添加onclick事件:

<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick= objclick;
function objclick(){alert(this.value)};
</script>

如果使用匿名函数 function(){},则如下面所示:

<input type="button" value="我是 button" id="bu">
<script type="text/javascript">
var bObj=document.getElementById("bu");
bObj.onclick=function(){alert(this.value)};
</script>

上面的方法其实原理都一样,都是定义 onclick 属性的值。值得注意的是,如果多次定义 obj.onclick,例如:obj.onclick=method1; obj.onclick=method2; obj.onclick=method3,那么只有最后一次的定义obj.onclick=method3才生效,前两次的定义都给最后一次的覆盖掉了。

再看 IE 中的 attachEvent:

<input type="button" value="我是拉登" id="bu">
<script type="text/javascript">
var bObj = document.getElementById("bu");
bObj.attachEvent("onclick",method1);
bObj.attachEvent("onclick",method2);
bObj.attachEvent("onclick",method3);
function method1(){alert("第一个alert")}
function method2(){alert("第二个alert")}
function method3(){alert("第三个alert")}
</script>

执行顺序是 method3 > method2 > method1 ,先进后出,与堆栈中的变量相似。需要注意的是attachEvent 中第一个参数是on开头的,可以是 onclick/onmouseover/onfocus 等等

据说(未经确认验证)在 IE 中使用 attachEvent 后最好再使用 detachEvent 来释放内存

再看看 Firefox 中的的 addEventListener:

<input type="button" value="我是布什" id="bu">
<script type="text/javascript">
var bObj = document.getElementById("bu");
bObj.addEventListener("click",method1,false);
bObj.addEventListener("click",method2,false);
bObj.addEventListener("click",method3,false);
function method1(){alert("第一个alert")}
function method2(){alert("第二个alert")}
function method3(){alert("第三个alert")}
</script>

可以看到,在 ff 中的执行顺序是 method1 > method2 > method3 , 刚好与 IE 相反,先进先出。需要注意的是 addEventListener 有三个参数,第一个是不带“on”的事件名称,如 click/mouseover/focus等。

以上这篇js动态添加的DIV中的onclick事件简单实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
onpropertypchange
Jul 01 Javascript
javascript+dom树型菜单类,希望朋友们一起进步
May 03 Javascript
JQuery 国际象棋棋盘 实现代码
Jun 26 Javascript
jQuery实战之仿淘宝商城左侧导航效果
Apr 12 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
javascript date格式化示例
Sep 25 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
JavaScript对JSON数组简单排序操作示例
Jan 31 Javascript
C#程序员入门学习微信小程序的笔记
Mar 05 Javascript
js微信分享API
Oct 11 #Javascript
jQuery简单注册和禁用全局事件的方法
Jul 25 #Javascript
jQuery ajax方法传递中文时出现中文乱码的解决方法
Jul 25 #Javascript
Javascript的比较汇总
Jul 25 #Javascript
[原创]jQuery常用的4种加载方式分析
Jul 25 #Javascript
JS仿百度自动下拉框模糊匹配提示
Jul 25 #Javascript
JS本地刷新返回上一页代码
Jul 25 #Javascript
You might like
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
php使用json_encode对变量json编码
2014/04/07 PHP
php 可变函数使用小结
2018/06/12 PHP
javascript之dhDataGrid Ver2.0.0代码
2007/07/01 Javascript
给Function做的OOP扩展
2009/05/07 Javascript
javascript中字符串的定义示例代码
2013/12/19 Javascript
纯js写的分页表格数据为json串
2014/02/18 Javascript
jQuery实现购物车数字加减效果
2015/03/14 Javascript
Vue数据驱动模拟实现2
2017/01/11 Javascript
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
vue.js实现含搜索的多种复选框(附源码)
2017/03/23 Javascript
详解浏览器缓存和webpack缓存配置
2018/07/06 Javascript
Angular4 组件通讯方法大全(推荐)
2018/07/12 Javascript
关于node-bindings无法在Electron中使用的解决办法
2018/12/18 Javascript
微信小程序实现的一键复制功能示例
2019/04/24 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
2019/09/27 Javascript
vue项目中使用particles实现粒子背景效果及遇到的坑(按钮没有点击响应)
2020/02/11 Javascript
vue2.x 对象劫持的原理实现
2020/04/19 Javascript
Openlayers实现地图的基本操作
2020/09/28 Javascript
Vue+Bootstrap实现简易学生管理系统
2021/02/09 Vue.js
[01:21:36]CHAOS vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
[01:07:15]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第二场 1月25日
2021/03/11 DOTA
python 基础学习第二弹 类属性和实例属性
2012/08/27 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
Python面向对象程序设计之类的定义与继承简单示例
2019/03/18 Python
python如何将两个txt文件内容合并
2019/10/18 Python
简单了解pytest测试框架setup和tearDown
2020/04/14 Python
css3实现小箭头各种图形效果
2020/07/08 HTML / CSS
乌克兰网上服装店:Bolf.ua
2018/10/30 全球购物
惠普香港官方商店:HP香港
2019/04/30 全球购物
毕业生求职的求职信
2013/12/05 职场文书
党课知识竞赛主持词
2014/04/01 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
学校宣传标语
2014/06/18 职场文书
小学生国庆65周年演讲稿范文(2篇)
2014/09/21 职场文书
优秀教师先进事迹材料
2014/12/15 职场文书