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 相关文章推荐
[JS]点出统计器
Oct 11 Javascript
Javascript快速排序算法详解
Dec 03 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
JavaScript电子时钟倒计时第二款
Jan 10 Javascript
JavaScript实现点击文本自动定位到下拉框选中操作
Jun 15 Javascript
JS判断是否为JSON对象及是否存在某字段的方法(推荐)
Nov 29 Javascript
jquery判断页面网址是否有效的两种方法
Dec 11 Javascript
js实现3d悬浮效果
Feb 16 Javascript
Vue 2.0中生命周期与钩子函数的一些理解
May 09 Javascript
Vue.js 点击按钮显示/隐藏内容的实例代码
Feb 08 Javascript
Bootstrap4如何定制自己的颜色和风格
Feb 26 Javascript
vue elementui form表单验证的实现
Nov 11 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的String类代码
2010/04/20 PHP
smarty中英文多编码字符截取乱码问题解决方法
2014/10/28 PHP
php上传图片类及用法示例
2016/05/11 PHP
扩展String功能方法
2006/09/22 Javascript
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
IE的事件传递-event.cancelBubble示例介绍
2014/01/12 Javascript
javascript快速排序算法详解
2014/09/17 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
2015/06/12 Javascript
jQuery原型属性和原型方法详解
2015/07/07 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery unbind()方法实例详解
2016/01/19 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
JavaScript 完成注册页面表单校验的实例
2017/08/19 Javascript
vue全局组件与局部组件使用方法详解
2018/03/29 Javascript
vue 中filter的多种用法
2018/04/26 Javascript
使用jQuery给Table动态增加行、清空table的方法
2018/09/05 jQuery
卸载vue2.0并升级vue_cli3.0的实例讲解
2020/02/16 Javascript
Javascript异步编程async实现过程详解
2020/04/02 Javascript
react 原生实现头像滚动播放的示例
2020/04/21 Javascript
vue监听dom大小改变案例
2020/07/29 Javascript
django项目环境搭建及在虚拟机本地创建django项目的教程
2019/08/02 Python
PyTorch加载预训练模型实例(pretrained)
2020/01/17 Python
python+selenium+PhantomJS抓取网页动态加载内容
2020/02/25 Python
python字典的值可以修改吗
2020/06/29 Python
基于Python模拟浏览器发送http请求
2020/11/06 Python
北美三大旅游网站之一:Travelocity加拿大
2016/08/20 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
语文教学感言
2014/02/06 职场文书
移风易俗倡议书
2014/04/15 职场文书
精神文明建设先进工作者事迹材料
2014/05/02 职场文书
无刑事犯罪记录证明范本
2014/09/29 职场文书
个人房屋买卖协议书(范本)
2014/10/04 职场文书
2015年学校工作总结范文
2015/04/20 职场文书
2015年七七事变78周年纪念活动方案
2015/05/06 职场文书