(转载)http://www.chhua.com/web-note146

attachEvent和addEventListener使用方法

Js代码

<html>
<head>
<title>JS</title>
</head> <body>
<input id="para" type="text"/>
<script>
function test()
{
alert("test");
}
function pig()
{
alert("pig");
} window.onload = function()
{
var element = document.getElementById("para");
if (element.addEventListener)
{
element.addEventListener("focus", test, false);
element.addEventListener("focus", pig, false);
}
else
{
element.attachEvent("onfocus", test);
element.attachEvent("onfocus", pig);
}
}
</script>
</body>
</html>

****************实例结束**************************

JS:attachEvent和addEventListener 使用方法

attachEvent与addEventListener区别

适应的浏览器版本不同,同时在使用的过程中要注意

attachEvent方法          按钮onclick

addEventListener方法    按钮click

两者使用的原理:可对执行的优先级不一样,下面实例讲解如下:

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

addEventListener方法 用于 Mozilla系列

举例:

Js代码

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
使用实例:

Js代码

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);
}

detachEvent和removeEventListener

Js代码

detachEvent('onclick', func);//ie下使用删除事件func
removeEventListener('click', func);//Mozilla下,删除事件func

(转载)JS事件监听 JS:attachEvent和addEventListener使用方法的更多相关文章

  1. JS事件监听 JS:attachEvent和addEventListener 使用方法

    attachEvent与addEventListener区别适应的浏览器版本不同,同时在使用的过程中要注意attachEvent方法          按钮onclickaddEventListene ...

  2. js 事件监听 兼容浏览器

    js 事件监听 兼容浏览器   ie 用 attachEvent   w3c(firefox/chrome)  用 addEventListener 删除事件监听 ie 用 detachEven   ...

  3. js事件监听机制(事件捕获)总结

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  4. js事件监听机制(事件捕获)

    在前端开发过程中我们经常会遇到给页面元素添加事件的问题,添加事件的js方法也很多,有直接加到页面结构上的,有使用一些js事件监听的方法,由于各个浏览器对事件冒泡事件监听的机制不同,le浏览器只有事件冒 ...

  5. js 事件监听 冒泡事件

    js 事件监听  冒泡事件   的取消 [自己写框架时,才有可能用到] <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

  6. js事件监听-addEventListener (w3c标准) 和 attachEvent(ie)

    研究了一个小时,没看懂这两个属性 window.onload = function(){ var oDiv = document.getElementById("J_myDiv") ...

  7. js 事件监听封装

    var eventUtil={//添加句柄 //element,节点 //type,事件类型 //handler,函数 addHandler:function(element,type,handler ...

  8. js事件监听

    /* 事件监听器 addEventListener() removeEventListener() 传统事件绑定: 1.重复添加会,后添加的后覆盖前面的. */ 示例代码中的html结构: <b ...

  9. Js事件监听封装(支持匿名函数)

    先看demo:http://liutian1937.github.io/demo/EventListen.html/*绑定事件与取消绑定*/ var handleHash = {}; var bind ...

随机推荐

  1. swift-07-使用for-in 遍历数组

    //for-in /* for 迭代变量 in集合变量 { 使用迭代变量便利所有数据 } */ //遍历数组 var arr = ["a" ,"b" ,&quo ...

  2. C++ Union妙用(将列表初始化用于数组元素)

    Union是个不被注意的关键字,意为联合体,这是个诡异的名字.若不是为了继承C语言,它也不会出现在C++中(虽说,union在C++中得到了扩充,完成了接近类的功能).它的作用主要是节省内存空间,在嵌 ...

  3. HDU 3008 Warcraft(DP)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3008 题目大意:人有100血和100魔法,每秒增加 t 魔法(不能超过100).n个技能,每个技能消耗 ...

  4. OpenCV学习(1)-安装(Windows)

    下载安装 在这里下载.我下载了2.4.9的Windows版本.双击安装即可. 配置环境变量 配置环境变量的目的是为了让系统找到OpenCV的动态链接库.因此需要把动态链接库添加到系统环境变量PATH中 ...

  5. ilasm.exe与ildasm.exe的使用(编译与反编译)

    ilasm.exe与ildasm.exe的使用(编译与反编译)   首先打开cmd命令.cd 到 C:\Program Files\Microsoft Visual Studio 8\SDK\v2.0 ...

  6. mysql 主从搭建步骤

    mysql 主从搭建步骤 1:主库开启master端bin-log 2:主库创建备份用户 3:主库全备 4:从库导入全备数据 5:从库修改change master to信息 6:从库slave st ...

  7. SVN资料库转移-----dump和load

    最近由于大批量的更换服务器,所以之前布署的SVN服务器需要重新布署,需要把原来的资源库转移到新服务器上,并且使管理的项目版本一致,在网上查了一下SVN版本库迁移,但看了一上google出来的也很少,所 ...

  8. absolute之整体布局实现

    要实现如图的布局,我最先想到是将header与footer绝对定位,但是发现在移动端会出现bug,经查资料发现用absolute实现整体布局非常好,还挺简单的. .header, .footer, . ...

  9. 【 java版坦克大战--事件处理】 坦克动起来了

    折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ①   paint ...

  10. 【python】for循环一列

    a="哈哈哈哈,笑死我了"for i in a: print (i, end=' ') 结果 哈 哈 哈 哈 , 笑 死 我 了