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弹出(alert)select选择的值
Apr 21 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
我的Node.js学习之路(一)
Jul 06 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
js实现文章文字大小字号功能完整实例
Nov 01 Javascript
牛叉的Jquery——Jquery与DOM对象的互相转换及DOM的三种操作
Oct 29 Javascript
获取input标签的所有属性的方法
Jun 28 Javascript
jQuery Ajax使用FormData对象上传文件的方法
Sep 07 Javascript
写jQuery插件时的注意点
Feb 20 Javascript
VueJS组件之间通过props交互及验证的方式
Sep 04 Javascript
js实现图片粘贴上传到服务器并展示的实例
Nov 08 Javascript
Vue操作Storage本地化存储
Apr 29 Vue.js
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中的加密功能
2006/10/09 PHP
PHP 采集程序 常用函数
2008/12/18 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
PHP用户管理中常用接口调用实例及解析(含源码)
2017/03/09 PHP
PHP基于PDO扩展操作mysql数据库示例
2018/12/24 PHP
js操作iframe父子窗体示例
2014/05/22 Javascript
node.js中的http.response.write方法使用说明
2014/12/14 Javascript
3个可以改善用户体验的AngularJS指令介绍
2015/06/18 Javascript
jQuery日历插件datepicker用法详解
2016/03/03 Javascript
javascript 广告移动特效的实现代码
2016/06/25 Javascript
JS实现div模块的截图并下载功能
2017/10/17 Javascript
jQuery内容过滤选择器与子元素过滤选择器用法实例分析
2019/02/20 jQuery
vue-week-picker实现支持按周切换的日历
2019/06/26 Javascript
jQuery实现移动端扭蛋机抽奖
2020/11/08 jQuery
[58:35]OG vs EG 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
[05:53]敌法师的金色冠名ID"BurNIng",是传说,是荣耀
2020/07/11 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
python访问系统环境变量的方法
2015/04/29 Python
python使用fcntl模块实现程序加锁功能示例
2017/06/23 Python
python数据结构之线性表的顺序存储结构
2018/09/28 Python
Python数据集切分实例
2018/12/08 Python
python多线程并发及测试框架案例
2019/10/15 Python
使用python的turtle绘画滑稽脸实例
2019/11/21 Python
pycharm部署、配置anaconda环境的教程
2020/03/24 Python
django queryset相加和筛选教程
2020/05/18 Python
使用tensorflow根据输入更改tensor shape
2020/06/23 Python
解决pytorch 交叉熵损失输出为负数的问题
2020/07/07 Python
Math.round(11.5)等於多少? Math.round(-11.5)等於多少?
2015/01/27 面试题
2014领导班子“四风问题”对照检查材料思想汇报(执法局)
2014/09/21 职场文书
合同和协议有什么区别?
2014/10/08 职场文书
委托公证书样本
2015/01/23 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
《天净沙·秋思》教学反思三篇
2019/11/02 职场文书
2019年暑期法院实习报告
2019/12/18 职场文书
Python中的min及返回最小值索引的操作
2021/05/10 Python
Android存储中最基本的文件存储方式
2022/04/30 Java/Android