js 动态加载事件的几种方法总结


Posted in Javascript onDecember 25, 2013

有些时候需要动态加载javascript事件的一些方法
往往我们需要在 JS 中动态添加事件,这就涉及到浏览器兼容性问题了,以下谈及的几种方法,我们也常常混合使用。

方法一、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()');

attachEvent方法,为某一事件附加其它的处理事件。(不支持Mozilla系列)

addEventListener方法 用于 Mozilla系列

举例:

document.getElementById("btn").onclick = method1;
document.getElementById("btn").onclick = method2;
document.getElementById("btn").onclick = method3;

如果这样写,那么将会只有medhot3被执行

写成这样:
var btn1Obj = document.getElementById("btn1");

//object.attachEvent(event,function);
btn1Obj.attachEvent("onclick",method1);
btn1Obj.attachEvent("onclick",method2);
btn1Obj.attachEvent("onclick",method3);
执行顺序为method3->method2->method1

如果是Mozilla系列,并不支持该方法,需要用到addEventListener

var btn1Obj = document.getElementById("btn1");
//element.addEventListener(type,listener,useCapture);
btn1Obj.addEventListener("click",method1,false);
btn1Obj.addEventListener("click",method2,false);
btn1Obj.addEventListener("click",method3,false);

执行顺序为method1->method2->method3

使用实例:

1。

var el = EDITFORM_DOCUMENT.body; 
//先取得对象,EDITFORM_DOCUMENT实为一个iframe
if (el.addEventListener){
 el.addEventListener('click', KindDisableMenu, false);
} else if (el.attachEvent){
 el.attachEvent('onclick', KindDisableMenu);
}

2。
if (window.addEventListener) {
 window.addEventListener('load', _uCO, false);
} else if (window.attachEvent) {
 window.attachEvent('onload', _uCO);
}
Javascript 相关文章推荐
js 调整select 位置的函数
Feb 21 Javascript
jquery关于图形报表的运用实现代码
Jan 06 Javascript
JavaScript仿flash遮罩动画效果
Jun 15 Javascript
Bootstrap轮播插件使用代码
Oct 11 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
bootstrap table动态加载数据示例代码
Mar 25 Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 Javascript
仿vue-cli搭建属于自己的脚手架的方法步骤
Apr 17 Javascript
微信小程序通过一个json实现分享朋友圈图片
Sep 03 Javascript
微信小程序 wx:for 与 wx:for-items 与 wx:key的正确用法
May 19 Javascript
Vue管理系统前端之组件拆分封装详解
Aug 23 Javascript
Vue中引入svg图标的两种方式
Jan 14 Vue.js
js 鼠标移动显示图片的简单实例
Dec 25 #Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 25 #Javascript
制作jquery遮罩层效果导航菜单代码分享
Dec 25 #Javascript
jquery创建表格(自动增加表格)代码分享
Dec 25 #Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 #Javascript
Javascript:为input设置readOnly属性(示例讲解)
Dec 25 #Javascript
Javascript设置对象的ReadOnly属性(示例代码)
Dec 25 #Javascript
You might like
聊天室php&mysql(五)
2006/10/09 PHP
php strtotime 函数UNIX时间戳
2009/01/14 PHP
PHP缩略图等比例无损压缩,可填充空白区域补充色
2011/06/10 PHP
关于PHP自动判断字符集并转码的详解
2013/06/26 PHP
php操作csv文件代码实例汇总
2014/09/22 PHP
PHP代码判断设备是手机还是平板电脑(两种方法)
2015/10/19 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
jQuery的三种$()
2009/12/30 Javascript
通过JS获取用户本地图片路径并显示的代码
2012/02/16 Javascript
基于jQuery的计算文本框字数的代码
2012/06/06 Javascript
js比较和逻辑运算符的介绍
2013/03/10 Javascript
关于eval 与new Function 到底该选哪个?
2013/04/17 Javascript
JQuery在页面中添加和除移DOM示例代码
2013/06/24 Javascript
javascript实现的简单的表单验证
2015/07/10 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
2016/05/24 Javascript
jquery pagination插件动态分页实例(Bootstrap分页)
2016/12/23 Javascript
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
jQuery使用动画队列自定义动画操作示例
2018/06/16 jQuery
详解Angular-ui-BootStrap组件的解释以及使用
2018/07/13 Javascript
详解JQuery基础动画操作
2019/04/12 jQuery
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
python 实现归并排序算法
2012/06/05 Python
Python2.6版本中实现字典推导 PEP 274(Dict Comprehensions)
2015/04/28 Python
tensorflow入门之训练简单的神经网络方法
2018/02/26 Python
Python实现ping指定IP的示例
2018/06/04 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python设计密码强度校验程序
2020/07/30 Python
发现世界上最好的珠宝设计师:JewelStreet
2017/12/17 全球购物
销售冠军获奖感言
2014/02/03 职场文书
酒店开业策划方案
2014/06/02 职场文书
电子商务求职信
2014/06/15 职场文书
园林技术专业求职信
2014/07/28 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
银行自荐信范文
2015/03/25 职场文书
企业承诺书格式范文
2015/04/28 职场文书
2019终止劳动合同协议书最新范本!
2019/07/09 职场文书