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 相关文章推荐
ExtJs使用IFrame的实现代码
Mar 24 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
在Iframe中获取父窗口中表单的值(示例代码)
Nov 22 Javascript
jquery正则表达式验证(手机号、身份证号、中文名称)
Dec 31 Javascript
js 截取或者替换字符串中的数字实现方法
Jun 13 Javascript
javascript遍历json对象的key和任意js对象属性实例
Mar 09 Javascript
JavaScript实现隐藏省略文字效果的方法
Apr 27 Javascript
Vue实现双向数据绑定
May 03 Javascript
在 Vue 应用中使用 Netlify 表单功能的方法详解
Jun 03 Javascript
微信小程序常用的3种提示弹窗实现详解
Sep 19 Javascript
vue学习笔记之Vue中css动画原理简单示例
Feb 29 Javascript
JavaScript变量Dom对象的所有属性
Apr 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
Zend Framework入门教程之Zend_Registry组件用法详解
2016/12/09 PHP
PHP/ThinkPHP实现批量打包下载文件的方法示例
2017/07/31 PHP
PHP获取远程http或ftp文件的md5值的方法
2019/04/15 PHP
JavaScript操作XML 使用百度RSS作为新闻源示例
2012/02/17 Javascript
JQuery页面图片切换和新闻列表滚动效果的具体实现
2013/09/26 Javascript
编写js扩展方法判断一个数组中是否包含某个元素
2013/11/08 Javascript
open 动态修改img的onclick事件示例代码
2013/11/13 Javascript
使用JSLint提高JS代码质量方法分享
2013/12/16 Javascript
node.js操作mysql(增删改查)
2015/07/24 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
JavaScript实现网页加载进度条代码超简单
2015/09/21 Javascript
javascript计时器编写过程与实现方法
2016/02/29 Javascript
JavaScript面试题大全(推荐)
2016/09/22 Javascript
JavaScript获取服务器端时间的方法
2016/11/29 Javascript
灵活使用console让js调试更简单的方法步骤
2019/04/23 Javascript
小程序两种滚动公告栏的实现方法
2019/09/17 Javascript
vue webpack build资源相对路径的问题及解决方法
2020/06/04 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
vue实现禁止浏览器记住密码功能的示例代码
2021/02/03 Vue.js
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
python使用reportlab实现图片转换成pdf的方法
2015/05/22 Python
用python实现将数组元素按从小到大的顺序排列方法
2018/07/02 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
用python写PDF转换器的实现
2020/10/29 Python
使用python tkinter开发一个爬取B站直播弹幕工具的实现代码
2021/02/07 Python
css3制作彩色边线3d立体按钮的示例(css3按钮)
2014/05/06 HTML / CSS
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
Foot Locker英国官网:美国知名运动产品零售商
2019/02/21 全球购物
西班牙土拨鼠床垫公司,感觉在云端:Marmota
2019/03/18 全球购物
vue项目实现分页效果
2021/03/24 Vue.js
高级编程求职信模板
2014/02/16 职场文书
小区文明倡议书
2014/05/16 职场文书
工资证明范本
2015/06/12 职场文书
遗失证明范文
2015/06/19 职场文书
mongodb的安装和开机自启动详细讲解
2021/08/02 MongoDB
python运行脚本文件的三种方法实例
2022/06/25 Python