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 相关文章推荐
提高代码性能技巧谈—以创建千行表格为例
Jul 01 Javascript
ASP中进行HTML数据及JS数据编码函数
Nov 11 Javascript
jquery命令汇总,方便使用jquery的朋友
Jun 26 Javascript
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
php析构函数的具体用法小结
Mar 11 Javascript
使用JavaScript的AngularJS库编写hello world的方法
Jun 23 Javascript
javascript实现动态导入js与css等静态资源文件的方法
Jul 25 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
Node.js环境下Koa2添加travis ci持续集成工具的方法
Jun 19 Javascript
基于JS实现html中placeholder属性提示文字效果示例
Apr 19 Javascript
Vue页面跳转动画效果的实现方法
Sep 23 Javascript
JS字典Dictionary类定义与用法示例
Feb 01 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与SQL注入攻击[一]
2007/04/17 PHP
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php 随机排序广告的实现代码
2011/05/09 PHP
解析php入库和出库
2013/06/25 PHP
php实现格式化多行文本为Js可用格式
2015/04/15 PHP
PHP中两个float(浮点数)比较实例分析
2015/09/27 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
浅谈Yii乐观锁的使用及原理
2017/07/25 PHP
在 IE 中调用 javascript 打开 Excel 表
2006/12/21 Javascript
JavaScript 继承详解(四)
2009/07/13 Javascript
jQuery getJSON 处理json数据的代码
2010/07/26 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
Javascript跨域请求的4种解决方式
2013/03/17 Javascript
Jquery遍历节点的方法小集
2014/01/22 Javascript
Js实现动态添加删除Table行示例
2014/04/14 Javascript
JavaScript中匿名函数用法实例
2015/03/23 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
2016/01/18 Javascript
JavaScript的函数式编程基础指南
2016/03/19 Javascript
AngularJS基础 ng-src 指令简单示例
2016/08/03 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
JS实现获取word文档内容并输出显示到html页面示例
2018/06/23 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
JS Array.from()将伪数组转换成数组的方法示例
2020/03/23 Javascript
更改Python命令行交互提示符的方法
2015/01/14 Python
简单理解Python中的装饰器
2015/07/31 Python
Python continue继续循环用法总结
2018/06/10 Python
Pytorch自己加载单通道图片用作数据集训练的实例
2020/01/18 Python
CSS3 倾斜的网页图片库实例教程
2009/11/14 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
整理HTML5的一些新特性与Canvas的常用属性
2016/01/29 HTML / CSS
党员自我评价分享
2013/12/13 职场文书
水毁工程实施方案
2014/04/01 职场文书
运动会开幕式新闻稿
2015/07/17 职场文书
公司借款担保书
2015/09/22 职场文书
Nginx URL重写rewrite机制原理及使用实例
2021/04/01 Servers
Win11控制面板快捷键是什么?Win11打开控制面板的方法汇总
2022/07/07 数码科技