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 相关文章推荐
两种WEB下的模态对话框 (asp.net或js的分别实现)
Dec 02 Javascript
谷歌浏览器不支持showModalDialog模态对话框的解决方法
Sep 22 Javascript
在父页面得到zTree已选中的节点的方法
Feb 12 Javascript
JavaScript焦点事件、鼠标事件和滚轮事件使用详解
Jan 15 Javascript
详解Matlab中 sort 函数用法
Mar 20 Javascript
Bootstrap table 定制提示语的加载过程
Feb 20 Javascript
js数字计算 误差问题的快速解决方法
Feb 28 Javascript
微信小程序 数据绑定及运算的简单实例
Sep 20 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
TypeScript之调用栈的实现
Dec 31 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
我的论坛源代码(四)
2006/10/09 PHP
模仿OSO的论坛(一)
2006/10/09 PHP
php 随机记录mysql rand()造成CPU 100%的解决办法
2010/05/18 PHP
php获取远程图片体积大小的实例
2013/11/12 PHP
mysql desc(DESCRIBE)命令实例讲解
2016/09/24 PHP
thinkPHP3.2.2框架行为扩展及demo示例
2018/06/19 PHP
Jquery中Ajax 缓存带来的影响的解决方法
2011/05/19 Javascript
关于event.cancelBubble和event.stopPropagation()的区别介绍
2011/12/11 Javascript
javascript实现输出指定行数正方形图案的方法
2015/08/03 Javascript
AngularJS基础教程之简单介绍
2015/09/27 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
2017/08/16 Javascript
JS实现前端缓存的方法
2017/09/21 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
关于js的三种使用方式(行内js、内部js、外部js)的程序代码
2018/05/05 Javascript
推荐15个最好用的JavaScript代码压缩工具
2019/02/13 Javascript
koa2服务端使用jwt进行鉴权及路由权限分发的流程分析
2019/07/22 Javascript
5分钟教你用nodeJS手写一个mock数据服务器的方法
2019/09/10 NodeJs
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
ES6的循环与可迭代对象示例详解
2021/01/31 Javascript
用Python实现斐波那契(Fibonacci)函数
2016/03/25 Python
Django中url的反向查询的方法
2018/03/14 Python
解决django同步数据库的时候app models表没有成功创建的问题
2019/08/09 Python
python实现批量文件重命名
2019/10/31 Python
ubuntu 18.04 安装opencv3.4.5的教程(图解)
2019/11/04 Python
python异常处理和日志处理方式
2019/12/24 Python
PyInstaller将Python文件打包为exe后如何反编译(破解源码)以及防止反编译
2020/04/15 Python
HTML5 canvas 基本语法
2009/08/26 HTML / CSS
会计自荐书
2013/12/02 职场文书
安全标准化实施方案
2014/02/20 职场文书
银行行长竞聘演讲稿
2014/04/23 职场文书
党员学习新党章思想汇报
2014/10/25 职场文书
教师节主题班会教案
2015/08/17 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
python自动计算图像数据集的RGB均值
2021/06/18 Python
Python实现仓库管理系统
2022/05/30 Python