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显示当然日期和时间即年月日星期和时间
Oct 29 Javascript
网页右下角弹出窗体实现代码
Jun 05 Javascript
jQuery分别获取选中的复选框值的示例
Jun 17 Javascript
jquery队列函数用法实例
Dec 16 Javascript
详解能在多种前端框架下使用的表格控件
Jan 11 Javascript
JS实现touch 点击滑动轮播实例代码
Jan 19 Javascript
jQuery中用on绑定事件时需注意的事项
Mar 19 Javascript
node基于puppeteer模拟登录抓取页面的实现
May 09 Javascript
Vue CLI3 如何支持less的方法示例
Aug 29 Javascript
vue微信分享插件使用方法详解
Feb 18 Javascript
vue组件中实现嵌套子组件案例
Aug 31 Javascript
vue+Element-ui前端实现分页效果
Nov 15 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
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
php随机获取金山词霸每日一句的方法
2015/07/09 PHP
IE6弹出“已终止操作”的解决办法
2010/11/27 Javascript
getComputedStyle与currentStyle获取样式(style/class)
2013/03/19 Javascript
jQuery的显示和隐藏方法与css隐藏的样式对比
2013/10/18 Javascript
浅谈Unicode与JavaScript的发展史
2015/01/19 Javascript
JS函数this的用法实例分析
2015/02/05 Javascript
Bootstrap表格使用方法详解
2017/02/17 Javascript
javascript 开发之百度地图使用到的js函数整理
2017/05/19 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
vue动态注册组件实例代码详解
2019/05/30 Javascript
layui表格 返回的数据状态异常的解决方法
2019/09/10 Javascript
vue页面切换项目实现转场动画的方法
2019/11/12 Javascript
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
python中List的sort方法指南
2014/09/01 Python
Python中用Spark模块的使用教程
2015/04/13 Python
Python实现输出程序执行进度百分比的方法
2017/09/16 Python
python matlibplot绘制3D图形
2018/07/02 Python
Python二维数组实现求出3*3矩阵对角线元素的和示例
2019/11/29 Python
python3 使用Opencv打开USB摄像头,配置1080P分辨率的操作
2019/12/11 Python
python中的 zip函数详解及用法举例
2020/02/16 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Python如何使用PIL Image制作GIF图片
2020/05/16 Python
python 抓取知乎指定回答下视频的方法
2020/07/09 Python
HTML5 本地存储 LocalStorage详解
2016/06/24 HTML / CSS
kmart凯马特官网:美国最大的打折零售商和全球最大的批发商之一
2016/11/17 全球购物
Expedia爱尔兰:酒店、机票、租车及廉价假期
2017/01/02 全球购物
印尼太阳百货公司网站:Matahari
2018/02/04 全球购物
咖啡店自主创业商业计划书
2014/01/22 职场文书
导购员的岗位职责
2014/02/08 职场文书
网络编辑岗位职责
2014/03/18 职场文书
公司授权委托书范本
2014/09/18 职场文书
干部考核工作总结
2015/08/12 职场文书
班级管理经验交流材料
2015/11/02 职场文书
预防职务犯罪警示教育心得体会
2016/01/15 职场文书
Redis遍历所有key的两个命令(KEYS 和 SCAN)
2021/04/12 Redis