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 相关文章推荐
判断ie的两种简单方法
Aug 12 Javascript
JavaScript创建对象的写法
Aug 29 Javascript
js克隆对象、数组的常用方法介绍
Sep 26 Javascript
JS绘制生成花瓣效果的方法
Aug 05 Javascript
深入浅析JavaScript中的作用域和上下文
Mar 26 Javascript
如何用js实现鼠标向上滚动时浮动导航
Jul 18 Javascript
JS判断iframe是否加载完成的方法
Aug 03 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
Jan 04 Javascript
Three.js获取鼠标点击的三维坐标示例代码
Mar 24 Javascript
十分钟带你快速了解React16新特性
Nov 10 Javascript
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
node获取客户端ip功能简单示例
Aug 24 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 数据库树的遍历方法
2009/02/06 PHP
PHP通过session id 实现session共享和登录验证的代码
2012/06/03 PHP
ThinkPHP3.1新特性之动态设置自动完成和自动验证示例
2014/06/19 PHP
Codeigniter购物车类不能添加中文的解决方法
2014/11/29 PHP
PHP框架Laravel的小技巧两则
2015/02/10 PHP
mysql_escape_string()函数用法分析
2016/04/25 PHP
php实现保存周期为1天的购物车类
2017/07/07 PHP
Laravel模型间关系设置分表的方法示例
2018/04/21 PHP
thinkPHP框架乐观锁和悲观锁实例分析
2019/10/30 PHP
Laravel 验证码认证学习记录小结
2019/12/20 PHP
分享十五个最佳jQuery 幻灯插件和教程
2010/03/27 Javascript
JavaScript判断一个URL链接是否有效的实现方法
2011/10/08 Javascript
js中浮点型运算BUG的解决方法说明
2014/01/06 Javascript
js showModalDialog弹出窗口实例详解
2014/01/07 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
2016/12/14 Javascript
微信小程序实现列表页的点赞和取消点赞功能
2018/11/02 Javascript
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
JavaScript实现身份证验证代码实例
2019/08/26 Javascript
解决layui的使用以及针对select、radio等表单组件不显示的问题
2019/09/05 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
python基础入门学习笔记(Python环境搭建)
2016/01/13 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
在Python的Flask框架中构建Web表单的教程
2016/06/04 Python
python版微信跳一跳游戏辅助
2018/01/11 Python
对Python正则匹配IP、Url、Mail的方法详解
2018/12/25 Python
python+openCV利用摄像头实现人员活动检测
2019/06/22 Python
Win10下Python3.7.3安装教程图解
2019/07/08 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
Python多线程threading创建及使用方法解析
2020/06/17 Python
ETO男装官方网店:ETO Jeans
2019/02/28 全球购物
餐饮采购员岗位职责
2014/03/15 职场文书
普通党员自我剖析材料
2014/10/07 职场文书
python3 sqlite3限制条件查询的操作
2021/04/07 Python
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python