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 相关文章推荐
JavaScript实现自动变换表格边框颜色
May 08 Javascript
js全选按钮的实现方法
Nov 17 Javascript
JavaScript中日常收集常见的10种错误(推荐)
Jan 08 Javascript
微信小程序之数据双向绑定与数据操作
May 12 Javascript
Javascript实现一个简单的输入关键字添加标签效果实例
Jun 01 Javascript
详解vue-cli + webpack 多页面实例配置优化方法
Jul 13 Javascript
使用JS获取SessionStorage的值
Jan 12 Javascript
用js简单提供增删改查接口
May 12 Javascript
js tab栏切换代码实例解析
Sep 03 Javascript
Vue中axios拦截器如何单独配置token
Dec 27 Javascript
JS如何把字符串转换成json
Feb 21 Javascript
jQuery实现颜色打字机的完整代码
Mar 19 jQuery
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数据入库前清理 注意php intval与mysql的int取值范围不同
2010/12/12 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
php之可变函数的实例详解
2017/09/13 PHP
PHP实现的AES加密、解密封装类与用法示例
2018/08/02 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
JQuery中html()方法使用不当带来的陷阱
2011/04/07 Javascript
使用json来定义函数,在里面可以定义多个函数的实现方法
2016/10/28 Javascript
react 组件传值的三种方法
2019/06/03 Javascript
前端路由&webpack基础配置详解
2019/06/10 Javascript
webpack 动态批量加载文件的实现方法
2020/03/19 Javascript
Element Badge标记的使用方法
2020/07/27 Javascript
[01:07:46]完美世界DOTA2联赛循环赛 Magma vs IO BO2第二场 11.01
2020/11/02 DOTA
对python程序内存泄漏调试的记录
2018/06/11 Python
Flask框架web开发之零基础入门
2018/12/10 Python
Python3数字求和的实例
2019/02/19 Python
详解Python字符串切片
2019/05/20 Python
安装好Pycharm后如何配置Python解释器简易教程
2019/06/28 Python
python读取图片的方式,以及将图片以三维数组的形式输出方法
2019/07/03 Python
Python循环结构的应用场景详解
2019/07/11 Python
详解如何从TensorFlow的mnist数据集导出手写体数字图片
2019/08/05 Python
Python DataFrame一列拆成多列以及一行拆成多行
2019/08/06 Python
Python collections中的双向队列deque简单介绍详解
2019/11/04 Python
Django后台管理系统的图文使用教学
2020/01/20 Python
利用Python过滤相似文本的简单方法示例
2021/02/03 Python
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
Html5 Canvas实现图片标记、缩放、移动和保存历史状态功能 (附转换公式)
2020/03/18 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
Office DEPOT法国官网:欧迪办公用品采购
2018/01/03 全球购物
美国领先的家庭健康检测试剂盒提供商:LetsGetChecked
2019/03/18 全球购物
波兰家居饰品和厨房配件网上商店:Maleomi
2020/12/15 全球购物
迟到检讨书400字
2014/01/13 职场文书
面临毕业的毕业生自荐书范文
2014/02/05 职场文书
自主招生学校推荐信
2014/09/26 职场文书
经典爱情感言
2015/08/03 职场文书
Go语言带缓冲的通道实现
2021/04/26 Golang
JVM入门之类加载与字节码技术(类加载与类的加载器)
2021/06/15 Java/Android