javascript下给元素添加事件的方法与代码


Posted in Javascript onAugust 13, 2007

最简单的是这样:

<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等。

Javascript 相关文章推荐
javascript Array对象基础知识小结
Nov 16 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
Jul 03 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
Jun 16 Javascript
jQuery中复合属性选择器用法实例
Dec 31 Javascript
JavaScript显示表单内元素数量的方法
Apr 02 Javascript
jQuery时间插件jquery.clock.js用法实例(5个示例)
Jan 14 Javascript
HTML5 实现的一个俄罗斯方块实例代码
Sep 19 Javascript
VueJS如何引入css或者less文件的一些坑
Apr 25 Javascript
vue+webpack实现异步加载三种用法示例详解
Apr 24 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
JavaScript中ES6规范中let和const的用法和区别
Aug 06 Javascript
webpack介绍使用配置教程详解webpack介绍和使用
Jun 25 Javascript
javascript引用对象的方法代码
Aug 13 #Javascript
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 #Javascript
一段效率很高的for循环语句使用方法
Aug 13 #Javascript
javascript实现轮显新闻标题链接
Aug 13 #Javascript
document.open() 与 document.write()的区别
Aug 13 #Javascript
js小技巧--自动隐藏红叉叉
Aug 13 #Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 #Javascript
You might like
基于PHP一些十分严重的缺陷详解
2013/06/03 PHP
php命令行使用方法和命令行参数说明
2014/04/08 PHP
thinkPHP自定义类实现方法详解
2016/11/30 PHP
javascript 鼠标悬浮图片显示原图 移出鼠标后原图消失(多图)
2009/12/28 Javascript
setTimeout与setInterval在不同浏览器下的差异
2010/01/24 Javascript
限制文本框输入N个字符的js代码
2010/05/13 Javascript
如何判断鼠标是否在DIV的区域内
2013/11/13 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
js+html5操作sqlite数据库的方法
2016/02/02 Javascript
javascript函数命名的三种方式及区别介绍
2016/03/22 Javascript
微信小程序小组件 基于Canvas实现直播点赞气泡效果
2020/05/29 Javascript
使用Angular CLI进行单元测试和E2E测试的方法
2018/03/24 Javascript
angularjs实现的购物金额计算工具示例
2018/05/08 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
基于Vue组件化的日期联动选择器功能的实现代码
2018/11/30 Javascript
python关键字and和or用法实例
2015/05/28 Python
python实现汉诺塔递归算法经典案例
2021/03/01 Python
Python处理中文标点符号大集合
2018/05/14 Python
pytorch实现特殊的Module--Sqeuential三种写法
2020/01/15 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
在TensorFlow中屏蔽warning的方式
2020/02/04 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
Python wordcloud库安装方法总结
2020/12/31 Python
Lookfantastic香港官网:英国知名美妆购物网站
2018/06/19 全球购物
Diamondback自行车:拥有你的冒险
2019/04/22 全球购物
毕业求职自荐信格式是什么
2013/11/19 职场文书
大学军训感言1000字
2014/02/25 职场文书
预备党员承诺书
2014/03/25 职场文书
我的求职择业计划书
2014/04/04 职场文书
车间核算员岗位职责
2014/07/01 职场文书
社会实践的活动方案
2014/08/22 职场文书
办理房产证委托书
2014/09/18 职场文书
群众路线自我剖析范文
2014/11/04 职场文书
Html5页面播放M4a音频文件
2021/03/30 HTML / CSS
Redis+Lua脚本实现计数器接口防刷功能(升级版)
2022/02/12 Redis
css3 文字断裂效果
2022/04/22 HTML / CSS