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 相关文章推荐
select标记美化--JS式插件、后期加载
Apr 01 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
javascript日期处理函数,性能优化批处理
Sep 06 Javascript
利用jsonp跨域调用百度js实现搜索框智能提示
Aug 24 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
js实现前端分页页码管理
Jan 06 Javascript
EasyUI Datebox 日期验证之开始日期小于结束时间
May 19 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
vue-cli3.0 特性解读
Apr 22 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
vue data恢复初始化数据的实现方法
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与SQL注入攻击[二]
2007/04/17 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
javascript修改图片src的方法
2015/01/27 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
JS中跳出循环的示例代码
2017/09/14 Javascript
浅谈Emergence.js 检测元素可见性的 js 插件
2017/11/18 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
关于laydate.js加载laydate.css路径错误问题解决
2017/12/27 Javascript
vue单页应用加百度统计代码(亲测有效)
2018/01/31 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
详解React 服务端渲染方案完美的解决方案
2018/12/14 Javascript
js获取 gif 的帧数的代码实例
2019/09/10 Javascript
layui禁用侧边导航栏点击事件的解决方法
2019/09/25 Javascript
vue获取data数据改变前后的值方法
2019/11/07 Javascript
只有 20 行的 JavaScript 模板引擎实例详解
2020/05/11 Javascript
vue Treeselect下拉树只能选择第N级元素实现代码
2020/08/31 Javascript
基于VUE实现简单的学生信息管理系统
2021/01/13 Vue.js
[03:09]2014DOTA2国际邀请赛 赛场上的美丽风景线 中国Coser也爱DOTA2
2014/07/20 DOTA
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
python实现数值积分的Simpson方法实例分析
2015/06/05 Python
Python判断文件和字符串编码类型的实例
2017/12/21 Python
Python实现爬虫爬取NBA数据功能示例
2018/05/28 Python
详解Numpy中的广播原则/机制
2018/09/20 Python
Python Opencv提取图片中某种颜色组成的图形的方法
2019/09/19 Python
将python安装信息加入注册表的示例
2019/11/20 Python
pycharm 实现本地写代码,服务器运行的操作
2020/06/08 Python
幼儿园中秋节活动方案2013
2014/01/29 职场文书
会计专业应届生自荐信
2014/06/28 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
物业项目经理岗位职责
2015/04/01 职场文书
Feign调用传输文件异常的解决
2021/06/24 Java/Android
十大最帅动漫男主 碓冰拓海上榜,第一是《灌篮高手》男主角
2022/03/18 日漫
详解pytorch创建tensor函数
2022/03/22 Python
js前端设计模式优化50%表单校验代码示例
2022/06/21 Javascript