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 相关文章推荐
一个轻量级的javascript库 pj介绍
Dec 19 Javascript
JavaScript获取和设置CheckBox状态的简单方法
Jul 05 Javascript
JavaScript动态修改弹出窗口大小的方法
Apr 06 Javascript
Angularjs中$http以post请求通过消息体传递参数的实现方法
Aug 05 Javascript
原生js实现倒计时功能(多种格式调用)
Jan 12 Javascript
JavaScript中一些特殊的字符运算
Aug 17 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
基于jquery trigger函数无法触发a标签的两种解决方法
Jan 06 jQuery
JavaScript多态与封装实例分析
Jul 27 Javascript
tracking.js页面人脸识别插件使用方法
Apr 16 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
Jan 08 Javascript
vue.js this.$router.push获取不到params参数问题
Mar 03 Javascript
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
一个SQL管理员的web接口
2006/10/09 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
2007/01/02 PHP
thinkphp文件处理类Dir.class.php的用法分析
2014/12/08 PHP
thinkPHP框架可添加js事件的分页类customPage.class.php完整实例
2017/03/16 PHP
javascript 动态修改样式和层叠样式表代码
2010/04/27 Javascript
Chrome Form多次提交表单问题的解决方法
2011/05/09 Javascript
suggestion开发小结以及对键盘事件的总结(针对中文输入法状态)
2011/12/20 Javascript
不使用jquery实现js打字效果示例分享
2014/01/19 Javascript
js数组中如何随机取出一个值
2014/06/13 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
javascript中日期函数new Date()的浏览器兼容性问题
2015/09/05 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
jQuery实现的跨容器无缝拖动效果代码
2016/06/21 Javascript
微信小程序 教程之wxapp视图容器 scroll-view
2016/10/19 Javascript
VueJs 将接口用webpack代理到本地的方法
2017/11/27 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
Vue+Jwt+SpringBoot+Ldap完成登录认证的示例代码
2018/05/21 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
websocket4.0+typescript 实现热更新的方法
2019/08/14 Javascript
jQuery实现简单日历效果
2020/07/05 jQuery
python使用三角迭代计算圆周率PI的方法
2015/03/20 Python
深入解析Python中的上下文管理器
2016/06/28 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
Python callable()函数用法实例分析
2018/03/17 Python
解决python3 json数据包含中文的读写问题
2018/05/10 Python
Python进度条的制作代码实例
2019/08/31 Python
Python实现密码薄文件读写操作
2019/12/16 Python
同步和异步有何异同,在什么情况下分别使用他们?举例说明
2014/02/27 面试题
shallow copy和deep copy的区别
2016/05/09 面试题
有个性的自我评价范文
2013/11/15 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
兵马俑导游词
2015/02/02 职场文书
医学生自荐信范文
2015/03/05 职场文书
教学反思怎么写
2016/02/24 职场文书
Android自定义ScrollView实现阻尼回弹
2022/04/01 Java/Android