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的Date方法实现代码(prototype)
Nov 20 Javascript
javascript中直接引用Microsoft的COM生成Word
Jan 20 Javascript
Javascript代码实现仿实例化类
Apr 03 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
vue.js指令和组件详细介绍及实例
Apr 06 Javascript
详解vue跨组件通信的几种方法
Jun 15 Javascript
微信小程序使用checkbox显示多项选择框功能【附源码下载】
Dec 11 Javascript
javascript实现对话框功能警告(alert 消息对话框)确认(confirm 消息对话框)
May 07 Javascript
Vue实现商品飞入购物车效果(电商项目)
Nov 26 Javascript
JS实现transform实现扇子效果
Jan 17 Javascript
在Angular中实现一个级联效果的下拉框的示例代码
May 20 Javascript
Ant design vue中的联动选择取消操作
Oct 31 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绝对路径与相对路径之间关系的的分析
2010/03/03 PHP
浅析PHP原理之变量(Variables inside PHP)
2013/08/09 PHP
php使用ob_start()实现图片存入变量的方法
2014/11/14 PHP
PHP微信开发之二维码生成类
2015/06/26 PHP
Yii框架上传图片用法总结
2016/03/28 PHP
PHP 500报错的快速解决方法
2016/12/14 PHP
Yii2选项卡的简单使用
2017/05/26 PHP
PHP实现将优酷土豆腾讯视频html地址转换成flash swf地址的方法
2017/08/04 PHP
PHP fopen中文文件名乱码问题解决方案
2020/10/28 PHP
Javascript里使用Dom操作Xml
2006/09/20 Javascript
Javascript中正则表达式的全局匹配模式分析
2011/04/26 Javascript
bootstrap datetimepicker 日期插件在火狐下出现一条报错信息的原因分析及解决办法
2017/03/08 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
详解vue项目接入微信JSSDK的坑
2018/12/14 Javascript
js实现类似iphone的网页滑屏解锁功能示例【附源码下载】
2019/06/10 Javascript
深入了解JavaScript词法作用域
2020/07/29 Javascript
ant design vue嵌套表格及表格内部编辑的用法说明
2020/10/28 Javascript
小程序组件传值和引入sass的方法(使用vant Weapp组件库)
2020/11/24 Javascript
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
python批量修改文件编码格式的方法
2018/05/31 Python
使用Django简单编写一个XSS平台的方法步骤
2019/03/25 Python
Python3 Tkinkter + SQLite实现登录和注册界面
2019/11/19 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python HTMLTestRunner库安装过程解析
2020/05/25 Python
HTML5 本地存储和内容按需加载的思路和方法
2011/04/07 HTML / CSS
语文教育专业应届生求职信
2013/11/23 职场文书
高中毕业的自我鉴定
2013/12/09 职场文书
《美丽的小路》教学反思
2014/02/26 职场文书
法律系毕业生自荐信范文
2014/03/27 职场文书
乡镇安全生产目标责任书
2014/07/23 职场文书
岗位职责说明书模板
2014/07/30 职场文书
英文演讲稿开场白
2014/08/25 职场文书
销售活动策划方案
2014/08/26 职场文书
热血教师观后感
2015/06/10 职场文书
经典哲理警句:志不真则心不热,心不热则功不贤
2019/11/14 职场文书
QT连接MYSQL数据库的详细步骤
2021/07/07 MySQL