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下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
jquery图片延迟加载 前端开发技能必备系列
Jun 18 Javascript
ajax上传时参数提交不更新等相关问题
Dec 11 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
javascript生成随机数的方法
May 16 Javascript
jQuery中odd选择器的定义和用法
Dec 23 Javascript
EasyUI实现二级页面的内容勾选的方法
Mar 01 Javascript
js实现可键盘控制的简单抽奖程序
Jul 13 Javascript
微信小程序 wxapp导航 navigator详解
Oct 31 Javascript
Angular.js中定时器循环的3种方法总结
Apr 27 Javascript
vue集成chart.js的实现方法
Aug 20 Javascript
vue解决花括号数据绑定不成功的问题
Oct 30 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 is_file 判断给定文件名是否为一个正常的文件
2010/05/10 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
解析zend studio中直接导入svn中的项目的方法步骤
2013/06/21 PHP
PHP 输出URL的快捷方式示例代码
2013/09/22 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
动态加载js和css(外部文件)
2013/04/17 Javascript
nodejs教程 安装express及配置app.js文件的详细步骤
2013/05/11 NodeJs
客户端js性能优化小技巧整理
2013/11/05 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
JS实现仿雅虎首页快捷登录入口及导航模块效果
2015/09/19 Javascript
表单元素值获取方式js及java方式的简单实例
2016/10/15 Javascript
移动端基础事件总结与应用
2017/01/12 Javascript
nodejs 终端打印进度条实例代码
2017/04/22 NodeJs
ES6学习笔记之正则表达式和字符串正则方法分析
2017/04/25 Javascript
js获取地址栏参数的两种方法
2017/06/27 Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
2017/09/17 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
js实现京东秒杀倒计时功能
2019/01/21 Javascript
基于JavaScript获取base64图片大小
2019/10/18 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
[02:03]《现实生活中的DOTA2》—林书豪&DOTA2职业选手出演短片
2015/08/18 DOTA
Python实现方便使用的级联进度信息实例
2015/05/05 Python
浅谈python中的占位符
2017/11/09 Python
Windows 7下Python Web环境搭建图文教程
2018/03/20 Python
使用Eclipse如何开发python脚本
2018/04/11 Python
python3.6利用pyinstall打包py为exe的操作实例
2018/10/31 Python
python文件拆分与重组实例
2018/12/10 Python
python 字典操作提取key,value的方法
2019/06/26 Python
python通过安装itchat包实现微信自动回复收到的春节祝福
2020/01/19 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
机电专业体育教师求职信
2013/09/21 职场文书
修理厂厂长岗位职责
2014/01/30 职场文书
个人担保书格式范文
2014/05/12 职场文书
党的群众路线教育实践活动对照检查材料(四风)
2014/09/27 职场文书
大学生年度个人总结
2015/02/15 职场文书
CSS3 制作的书本翻页特效
2021/04/13 HTML / CSS