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 相关文章推荐
在次封装easyui-Dialog插件实现代码
Nov 14 Javascript
js 处理URL实用技巧
Nov 23 Javascript
基于jquery的当鼠标滚轮到最底端继续加载新数据思路分享(多用于微博、空间、论坛 )
Oct 10 Javascript
jquery 无限级下拉菜单的简单实现代码
Feb 21 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
angularjs 源码解析之scope
Aug 22 Javascript
js html5 css俄罗斯方块游戏再现
Oct 17 Javascript
jQuery动态追加页面数据以及事件委托详解
May 06 jQuery
JS实现微信里判断页面是否被分享成功的方法
Jun 06 Javascript
让你彻底掌握es6 Promise的八段代码
Jul 26 Javascript
JS实现判断数组是否包含某个元素示例
May 24 Javascript
微信小程序获取地理位置及经纬度授权代码实例
Sep 18 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动态创建Web站点的方法
2011/08/14 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
php正则preg_replace_callback函数用法实例
2015/06/01 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
自写简单JS判断是否已经弹出页面
2010/10/20 Javascript
使用js判断TextBox控件值改变然后出发事件
2014/03/07 Javascript
Node.js检测端口(port)是否被占用的简单示例
2016/09/29 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
2017/08/08 Javascript
解决option标签selected=&quot;selected&quot;属性失效的问题
2017/11/06 Javascript
JavaScript反射与依赖注入实例详解
2018/05/29 Javascript
超出JavaScript安全整数限制的数字计算BigInt详解
2018/06/24 Javascript
使用微信小程序开发弹出框应用实例详解
2018/10/18 Javascript
three.js利用射线Raycaster进行碰撞检测
2020/03/12 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
Python给图像添加噪声具体操作
2019/03/03 Python
详解Python中pandas的安装操作说明(傻瓜版)
2019/04/08 Python
Python自定义一个异常类的方法
2019/06/27 Python
opencv python 图像轮廓/检测轮廓/绘制轮廓的方法
2019/07/03 Python
python对csv文件追加写入列的方法
2019/08/01 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
用于ETL的Python数据转换工具详解
2020/07/21 Python
阻止移动设备(手机、pad)浏览器双击放大网页的方法
2014/06/03 HTML / CSS
H5调用相机拍照并压缩图片的实例代码
2017/07/20 HTML / CSS
英国赛车、汽车改装和摩托车零件购物网站:Demon Tweeks
2018/10/29 全球购物
大学生毕业自我评价范文分享
2013/11/07 职场文书
给面试官的感谢信
2014/02/01 职场文书
《雾凇》教学反思
2014/02/17 职场文书
党员创先争优承诺书
2014/03/26 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
解除处分决定书
2015/06/25 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
MySQL时区造成时差问题
2022/04/13 MySQL
vue实现省市区联动 element-china-area-data插件
2022/04/22 Vue.js
A22国内电台短波广播频率表
2022/05/10 无线电