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计数器代码
Nov 04 Javascript
灵活应用js调试技巧解决样式问题的步骤分享
Mar 15 Javascript
自定义jQuery选项卡插件实例
Mar 27 Javascript
多个datatable共存造成多个表格的checkbox都被选中
Jul 11 Javascript
Javascript实现滚动图片新闻的实例代码
Nov 27 Javascript
JS 实现列表与多选框选择附预览动画
Oct 29 Javascript
JQuery遍历json数组的3种方法
Nov 08 Javascript
transport.js和jquery冲突问题的解决方法
Feb 10 Javascript
基于jquery实现在线选座订座之影院篇
Aug 24 Javascript
JavaScript正则表达式校验与递归函数实际应用实例解析
Aug 04 Javascript
javascript将url解析为json格式的两种方法
Aug 18 Javascript
webpack+vue.js构建前端工程化的详细教程
May 10 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
深入探讨<br />和 \r\n两者有什么区别??
2013/06/05 PHP
PHPMailer发送HTML内容、带附件的邮件实例
2014/07/01 PHP
php高性能日志系统 seaslog 的安装与使用方法分析
2020/02/29 PHP
基于jQuery实现文本框缩放以及上下移动功能
2014/11/24 Javascript
jquery动态添加删除(tr/td)
2015/02/09 Javascript
在Ubuntu系统上安装Node.JS的教程
2015/10/15 Javascript
javascript中sort排序实例详解
2016/07/24 Javascript
AngularJS实现DOM元素的显示与隐藏功能
2016/11/22 Javascript
JS实现淡入淡出图片效果的方法分析
2016/12/20 Javascript
jquery表单提交带错误信息提示效果
2017/03/09 Javascript
js实现倒计时关键代码
2017/05/05 Javascript
layui弹出层效果实现代码
2017/05/19 Javascript
JavaScript new对象的四个过程实例浅析
2018/07/31 Javascript
Vue作用域插槽slot-scope实例代码
2018/09/05 Javascript
小试小程序云开发(小结)
2019/06/06 Javascript
Javascript实现秒表计时游戏
2020/05/27 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
Python读取文件内容的三种常用方式及效率比较
2017/10/07 Python
python3之模块psutil系统性能信息使用
2018/05/30 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
Tensorflow加载Vgg预训练模型操作
2020/05/26 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
美国创意之家:BulbHead
2017/07/12 全球购物
Laura Mercier官网:彩妆大师罗拉玛斯亚的化妆品牌
2018/01/04 全球购物
DJI全球:DJI Global
2021/03/15 全球购物
农村婚礼证婚词
2014/01/08 职场文书
自我鉴定书面格式
2014/01/13 职场文书
商场中秋节活动方案
2014/02/07 职场文书
推荐信怎么写
2014/05/09 职场文书
客房服务员岗位职责
2015/02/09 职场文书
2015年材料员工作总结
2015/04/30 职场文书
pandas 实现将NaN转换为None
2021/05/14 Python
浅谈Python数学建模之整数规划
2021/06/23 Python
德生BCL3000抢先使用感受和评价
2022/04/07 无线电