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 相关文章推荐
Web开发之JavaScript
Mar 29 Javascript
js判断undefined变量类型使用typeof
Jun 03 Javascript
js身份证判断方法支持15位和18位
Mar 18 Javascript
深入理解javascript构造函数和原型对象
Sep 23 Javascript
JavaScript中setFullYear()方法的使用详解
Jun 11 Javascript
jQuery动态星级评分效果实现方法
Aug 06 Javascript
jQuery实现伪分页的方法分享
Feb 17 Javascript
利用JS如何计算字符串所占字节数示例代码
Sep 13 Javascript
原生JavaScript实现Ajax异步请求
Nov 19 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
详解微信小程序scroll-view横向滚动的实践踩坑及隐藏其滚动条的实现
Mar 14 Javascript
vue封装自定义指令之动态显示title操作(溢出显示,不溢出不显示)
Nov 12 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判断用户是否已经登录(跳转到不同页面或者执行不同动作)
2016/09/22 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
php实现微信支付之现金红包
2018/05/30 PHP
PHP+jQuery实现双击修改table表格功能示例
2019/02/21 PHP
javascript new一个对象的实质
2010/01/07 Javascript
jquery滚动组件(vticker.js)实现页面动态数据的滚动效果
2013/07/03 Javascript
纯js简单日历实现代码
2013/10/05 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
浅谈bootstrap使用中的一些问题以及解决过程
2016/10/18 Javascript
深入理解jquery中extend的实现
2016/12/22 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
AngularJs 常用的过滤器
2017/05/15 Javascript
Vue SSR 组件加载问题
2018/05/02 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
vue实现手机端省市区区域选择
2019/09/27 Javascript
基于JavaScript实现十五拼图代码实例
2020/04/26 Javascript
实例说明Python中比较运算符的使用
2015/05/13 Python
简单讲解Python中的闭包
2015/08/11 Python
Django代码性能优化与Pycharm Profile使用详解
2018/08/26 Python
python3安装crypto出错及解决方法
2019/07/30 Python
Python项目跨域问题解决方案
2020/06/22 Python
Python创建临时文件和文件夹
2020/08/05 Python
python help函数实例用法
2020/12/06 Python
canvas实现俄罗斯方块的方法示例
2018/12/13 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
Agoda台湾官网:国内外订房2折起
2018/03/20 全球购物
4s客服专员岗位职责
2013/12/01 职场文书
歌唱比赛主持词
2014/03/18 职场文书
继承公证书样本
2014/04/04 职场文书
詹天佑教学反思
2014/04/30 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/09/30 职场文书
杭州西湖英语导游词
2015/02/03 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
小学教师教学反思
2016/02/24 职场文书
windows11怎么查看自己安装的版本号? win11版本号的查看方法
2021/11/21 数码科技