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 相关文章推荐
一个js实现的所谓的滑动门
May 23 Javascript
javascript 选择文件夹对话框(web)
Jul 07 Javascript
IE Firefox 使用自定义标签的区别
Oct 15 Javascript
JavaScript的单例模式 (singleton in Javascript)
Jun 11 Javascript
使用Grunt.js管理你项目的应用说明
Apr 24 Javascript
JS实现的省份级联实例代码
Jun 24 Javascript
js opener的使用详解
Jan 11 Javascript
readonly和disabled属性的区别
Jul 26 Javascript
vue中渐进过渡效果实现
Oct 27 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
Sep 01 Javascript
javascript实现导航栏分页效果
Jun 27 Javascript
JavaScript实现省市联动效果
Nov 22 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常用的文件操作函数经典收藏
2013/04/02 PHP
php中单个数据库字段多列显示(单字段分页、横向输出)
2014/07/28 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
php实现网站文件批量压缩下载功能
2015/10/28 PHP
PHP XML Expat解析器知识点总结
2019/02/15 PHP
PHP设计模式(九)外观模式Facade实例详解【结构型】
2020/05/02 PHP
漂亮的widgets,支持换肤和后期开发新皮肤(2007-4-27已更新1.7alpha)
2007/04/27 Javascript
json 实例详细说明教程
2009/10/31 Javascript
JavaScript QueryString解析类代码
2010/01/17 Javascript
javascript 伪数组实现方法
2010/10/11 Javascript
浅析return false的正确使用
2013/11/04 Javascript
jQuery产品间断向下滚动效果核心代码
2014/05/08 Javascript
轻松实现Bootstrap图片轮播
2020/04/20 Javascript
js创建jsonArray传输至后台及后台全面解析
2016/04/11 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
2016/05/13 Javascript
vue2.0获取鼠标位置的方法
2018/09/13 Javascript
深入Python函数编程的一些特性
2015/04/13 Python
Python程序中使用SQLAlchemy时出现乱码的解决方案
2015/04/24 Python
python开发之tkinter实现图形随鼠标移动的方法
2015/11/11 Python
python数据清洗系列之字符串处理详解
2017/02/12 Python
django轻松使用富文本编辑器CKEditor的方法
2017/03/30 Python
python调用外部程序的实操步骤
2019/03/04 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
python读取文件指定行内容实例讲解
2020/03/02 Python
详解Pycharm与anaconda安装配置指南
2020/08/25 Python
python中uuid模块实例浅析
2020/12/29 Python
python自动生成sql语句的脚本
2021/02/24 Python
几个判断型的面试题
2012/07/03 面试题
2014信息技术专业毕业生自我评价
2014/01/17 职场文书
舞蹈教育学专业自荐信
2014/06/15 职场文书
暑期工社会实践报告
2015/07/13 职场文书
2016国庆促销广告语
2016/01/28 职场文书
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
MySQL GRANT用户授权的实现
2021/06/18 MySQL
如何使用 resize 实现图片切换预览功能
2021/08/23 HTML / CSS
Win10系统搭建ftp文件服务器详细教程
2022/08/05 Servers