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 相关文章推荐
jQuery选择器的工作原理和优化分析
Jul 25 Javascript
ajax与302响应代码测试
Oct 23 Javascript
jquery默认校验规则整理
Mar 24 Javascript
node.js中的fs.readlink方法使用说明
Dec 17 Javascript
JS设置下拉列表框当前所选值的方法
Dec 22 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
jQuery元素选择器实例代码
Feb 06 Javascript
如何理解Vue的作用域插槽的实现原理
Aug 19 Javascript
Angular 向组件传递模板的两种方法
Feb 23 Javascript
JavaScript基础心法 数据类型
Mar 05 Javascript
父组件中vuex方法更新state子组件不能及时更新并渲染的完美解决方法
Apr 25 Javascript
在vue中使用echars实现上浮与下钻效果
Nov 08 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 curl库实现整站克隆功能
2015/02/12 PHP
Linux系统中为php添加pcntl扩展
2016/08/28 PHP
php过滤输入操作之htmlentities与htmlspecialchars用法分析
2017/02/17 PHP
PHP实现数组的笛卡尔积运算示例
2017/12/15 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
ext 列表页面关于多行查询的办法
2010/03/25 Javascript
jquery动态加载select下拉框示例代码
2013/12/10 Javascript
JavaScript charCodeAt方法入门实例(用于取得指定位置字符的Unicode编码)
2014/10/17 Javascript
理解javascript异步编程
2016/01/27 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
2016/05/17 Javascript
使用OPENLAYERS3实现点选的方法
2020/09/24 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
微信小程序checkbox组件使用详解
2018/01/31 Javascript
vue中进入详情页记住滚动位置的方法(keep-alive)
2018/09/21 Javascript
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
vue实现评论列表功能
2019/10/25 Javascript
axios 实现post请求时把对象obj数据转为formdata
2019/10/31 Javascript
vue中在vuex的actions中请求数据实例
2019/11/08 Javascript
[01:02:30]Mineski vs Secret 2019国际邀请赛淘汰赛 败者组 BO3 第三场 8.22
2019/09/05 DOTA
详解Python中的from..import绝对导入语句
2016/06/21 Python
详解Django中六个常用的自定义装饰器
2018/07/04 Python
python代码中怎么换行
2020/06/17 Python
python 19个值得学习的编程技巧
2020/08/15 Python
利用CSS3把图片变成灰色模式的实例代码
2016/09/06 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
英国版MAC彩妆品牌:Illamasqua
2018/04/18 全球购物
结婚邀请函范文
2014/01/14 职场文书
先进班级集体事迹材料
2014/01/30 职场文书
大学新闻系求职信
2014/06/03 职场文书
大学生个人总结范文
2015/02/15 职场文书
七年级语文教学反思
2016/03/03 职场文书
2019年汽车租赁合同范本!
2019/08/12 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Python基础之元类详解
2021/04/29 Python