javascript 动态添加事件代码


Posted in Javascript onNovember 30, 2008

方法一、setAttribute
var obj = document.getElementById("obj");
obj.setAttribute("onclick", "javascript:alert('测试');");
这里利用 setAttribute 指定 onclick 属性,简单,很好理解,
但是:IE 不支持,IE 并不是不支持 setAttribute 这个函数,而是不支持用 setAttribute 设置某些属性,包括对象属性、集合属性、事件属性,也就是说用 setAttribute 设置 style、onclick、onmouseover 这些属性在 IE 中是行不通的。
方法二、用 attachEvent 和 addEventListener
IE 支持 attachEvent
obj.attachEvent("onclick", Foo);
function Foo()
{
alert("测试");
}
也可写在一起
obj.attachEvent("onclick", function(){alert("测试");});
其它浏览器支持 addEventListener
obj.addEventListener("click", Foo, false);
function Foo()
{
alert("测试");
}
同样也可写在一起
obj.addEventListener("click", function(){alert("测试");}, false);
注意 attachEvent 的事件带 on,如 onclick,而 addEventListener 不带 on,如 click。
顺便说一下 addEventListener 的第三个参数(虽然很少用) useCapture - 如果为 true,则 useCapture 指示用户希望启动捕获。启动捕获后,所有指定类型的事件将在被指派到树中其下面的任何 EventTargets 之前指派给已注册的 EventListener。正在通过树向上 bubbling 的事件将不触发指定的使用捕获的 EventListener。
综合应用
if (window.attachEvent)
{
//IE 的事件代码
}
else
{
//其它浏览器的事件代码
}
方法三、事件 = 函数
例:obj.onclick = Foo;
这在多个浏览器中均支持,这是属于旧的规范(方法二属于 DOM2 的规范),不过由于使用方便,用的场合也比较多。

下面是我的解决办法:
function show(){
alert("Hello, world!!!");
}
obj.setAttribute('onclick',document.all ? eval(function(){show()}) : 'javascript:show()');
看起来很简单,也兼容浏览器,就是不知道还有没有其他方面的影响,或者有更好的方法可以取代呢?

Javascript 相关文章推荐
jquery 实现上下滚动效果示例代码
Aug 09 Javascript
javascript中简单的进制转换代码实例
Oct 26 Javascript
js数组中如何随机取出一个值
Jun 13 Javascript
jQuery form插件之ajaxForm()和ajaxSubmit()的可选参数项对象
Jan 23 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
AngularJs表单验证实例代码解析
Nov 29 Javascript
使用proxy实现一个更优雅的vue【推荐】
Jun 19 Javascript
vue.js父子组件通信动态绑定的实例
Sep 28 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
May 11 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
详解JavaScript中的this指向问题
Feb 05 Javascript
JS 自动安装exe程序
Nov 30 #Javascript
javascript 尚未实现错误解决办法
Nov 27 #Javascript
Javascript 构造函数 实例分析
Nov 26 #Javascript
Javascript hasOwnProperty 方法 & in 关键字
Nov 26 #Javascript
Javascript 陷阱 window全局对象
Nov 26 #Javascript
Javascript 对象的解释
Nov 24 #Javascript
javascript脚本调试方法小结
Nov 24 #Javascript
You might like
PHP_MySQL教程-第一天
2007/03/18 PHP
phpmyadmin3 安装配置图解教程
2012/03/29 PHP
初识PHP
2014/09/28 PHP
php判断IP地址是否在多个IP段内
2020/08/18 PHP
JavaScript中的new的使用方法与注意事项
2007/05/16 Javascript
Js基础学习资料
2010/11/23 Javascript
jQuery 1.5 源码解读 面向中高阶JSER
2011/04/05 Javascript
Ajax执行顺序流程及回调问题分析
2012/12/10 Javascript
判断是否存在子节点的实现代码
2016/05/18 Javascript
从零学习node.js之详解异步控制工具async(八)
2017/02/27 Javascript
NodeJS测试框架mocha入门教程
2017/03/28 NodeJs
JavaScript监听手机物理返回键的两种解决方法
2017/08/14 Javascript
node中使用es6/7/8(支持性与性能)
2019/03/28 Javascript
koa-passport实现本地验证的方法示例
2020/02/20 Javascript
你准备好迎接vue3.0了吗
2020/04/28 Javascript
[46:47]完美世界DOTA2联赛PWL S2 FTD vs Magma 第二场 11.20
2020/11/23 DOTA
go语言计算两个时间的时间差方法
2015/03/13 Python
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
Python基于回溯法子集树模板解决最佳作业调度问题示例
2017/09/08 Python
python抓取京东小米8手机配置信息
2018/11/13 Python
Python timeit模块的使用实践
2020/01/13 Python
Python实现子类调用父类的初始化实例
2020/03/12 Python
Django多数据库联用实现方法解析
2020/11/12 Python
css3中用animation的steps属性制作帧动画
2019/04/25 HTML / CSS
美国知名的网上鞋类及相关服装零售商:Shoes.com
2017/05/06 全球购物
Swisse官方海外旗舰店:澳大利亚销量领先,自然健康品牌
2017/12/15 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
美国宠物用品网站:Value Pet Supplies
2018/03/17 全球购物
名词解释型面试题(主要是网络)
2013/12/27 面试题
生产管理的三大手法
2013/11/11 职场文书
医药工作岗位求职信分享
2013/12/31 职场文书
工厂保安员岗位职责
2014/01/31 职场文书
读群众路线心得体会
2014/03/07 职场文书
2015新教师教学工作总结
2015/07/22 职场文书
仓库管理制度范本
2015/08/04 职场文书
Android Canvas绘制文字横纵向对齐
2022/06/05 Java/Android