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 相关文章推荐
ArrayList类(增强版)
Apr 04 Javascript
javascript与asp.net(c#)互相调用方法
Dec 13 Javascript
javascript工具库代码
Mar 29 Javascript
jquery判断RadioButtonList和RadioButton中是否有选中项示例
Sep 29 Javascript
js星星评分效果
Jul 24 Javascript
jquery实现页面关键词高亮显示的方法
Mar 12 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
Jul 12 Javascript
详解微信小程序 页面跳转 传递参数
Dec 08 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
Vue.js的动态组件模板的实现
Nov 26 Javascript
vue中后端做Excel导出功能返回数据流前端的处理操作
Sep 08 Javascript
原生js+css实现tab切换功能
Sep 17 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代码
2007/03/03 PHP
测试php连接mysql是否成功的代码分享
2014/01/24 PHP
php文件服务实现虚拟挂载其他目录示例
2014/04/17 PHP
Laravel4中的Validator验证扩展用法详解
2016/07/26 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
php实现不通过扩展名准确判断文件类型的方法【finfo_file方法与二进制流】
2017/04/18 PHP
PHP常用操作类之通信数据封装类的实现
2017/07/16 PHP
PHP面向对象程序设计之对象的遍历操作示例
2019/06/12 PHP
jquery下jstree简单应用 - v1.0
2011/04/14 Javascript
jQuery不间断滚动效果(模拟百度新闻支持文字/图片/垂直滚动)
2013/02/05 Javascript
Jquery Validate 正则表达式实用验证代码大全
2013/08/23 Javascript
Javascript加载速度慢的解决方案
2014/03/11 Javascript
jQuery中delegate()方法用法实例
2015/01/19 Javascript
easyui datebox 时间限制,datebox开始时间限制结束时间,datebox截止日期比起始日期大的实现代码
2017/01/12 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
Javascript实现时间倒计时功能
2018/11/17 Javascript
小程序指纹验证的实现代码
2018/12/04 Javascript
vue使用vuex实现首页导航切换不同路由的方法
2019/05/08 Javascript
vue通信方式EventBus的实现代码详解
2019/06/10 Javascript
详解vue高级特性
2020/06/09 Javascript
python3中int(整型)的使用教程
2017/03/23 Python
python基础练习之几个简单的游戏
2017/11/10 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
tensorflow中tf.slice和tf.gather切片函数的使用
2020/01/19 Python
python GUI库图形界面开发之PyQt5浏览器控件QWebEngineView详细使用方法
2020/02/26 Python
如何在python中执行另一个py文件
2020/04/30 Python
土耳其国际性时尚购物网站:Modanisa
2018/01/19 全球购物
ROSEFIELD手表荷兰官方网上商店:北欧极简设计女士腕表品牌
2018/01/24 全球购物
好的自荐信包括什么内容
2013/11/07 职场文书
金融专业大学生自我评价
2014/01/09 职场文书
女儿十岁生日答谢词
2014/01/27 职场文书
幼儿园六一儿童节活动方案
2014/08/26 职场文书
财务工作犯错检讨书
2014/10/07 职场文书
事业单位工作人员年度考核个人总结
2015/02/12 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
小程序实现悬浮按钮的全过程记录
2021/10/16 HTML / CSS