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中常见陷阱小结
Apr 27 Javascript
jQuery实现图片渐入渐出切换展示效果
Aug 15 Javascript
Node.js如何响应Ajax的POST请求并且保存为JSON文件详解
Mar 10 Javascript
详解webpack+angular2开发环境搭建
Jun 28 Javascript
微信小程序 共用变量值的实现
Jul 12 Javascript
Vue组件化开发思考
Feb 02 Javascript
vue使用better-scroll实现下拉刷新、上拉加载
Nov 23 Javascript
基于vue实现一个禅道主页拖拽效果
May 27 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
Jul 02 Javascript
微信小程序动画组件使用解析,类似vue,且更强大
Aug 01 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
Nov 24 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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测试程序运行时间的类
2012/02/05 PHP
php计算整个目录大小的方法
2015/06/01 PHP
php阳历转农历优化版
2016/08/08 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
JSON 客户端和服务器端的格式转换
2009/08/27 Javascript
js 数组的for循环到底应该怎么写?
2010/05/31 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
复杂的javascript窗口分帧解析
2016/02/19 Javascript
VueJs与ReactJS和AngularJS的异同点
2016/12/12 Javascript
详解VueJs异步动态加载块
2017/03/09 Javascript
jquery 键盘事件的使用方法详解
2017/09/13 jQuery
ES7中利用Await减少回调嵌套的方法详解
2017/11/01 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
浅谈针对Vue相同路由不同参数的刷新问题
2018/09/29 Javascript
vue实现吸顶、锚点和滚动高亮按钮效果
2019/10/21 Javascript
JS深入学习之数组对象排序操作示例
2020/05/01 Javascript
使用vue引入maptalks地图及聚合效果的实现
2020/08/10 Javascript
如何手写一个简易的 Vuex
2020/10/10 Javascript
ReactRouter的实现方法
2021/01/25 Javascript
python自动裁剪图像代码分享
2017/11/25 Python
pandas数值计算与排序方法
2018/04/12 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
python实现蒙特卡罗方法教程
2019/01/28 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
实现Python与STM32通信方式
2019/12/18 Python
html5-websocket基于远程方法调用的数据交互实现
2012/12/04 HTML / CSS
canvas实现漂亮的下雨效果的示例
2018/04/18 HTML / CSS
EJB发布WEB服务一般步骤
2012/10/31 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
高中生毕业自我鉴定
2013/10/10 职场文书
揭牌仪式策划方案
2014/05/28 职场文书
学用政策心得体会
2014/09/10 职场文书
2014年社区卫生工作总结
2014/12/18 职场文书
出生证明格式
2015/06/15 职场文书
Pandas 稀疏数据结构的实现
2021/07/25 Python