（转载）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. java新手笔记1 Hello World!

    //Hello.java文件 //类声明 public class Hello{ //声明方法 main程序入口 public static void main (String[] args) { S ...

  2. 虚拟机中如何Linux系统如何访问PC硬盘中的文件（如何将windows下的文件夹挂载到linux虚拟机下）

    这段时间决定学习嵌入式,变打算安装个Linux系统先熟悉一下Linux系统的使用,但自己电脑上安装的win7系统又不想装双系统,一是闲麻烦,二是由于对Linux系统不熟悉担心会因为自己的误操作而损坏系 ...

  3. 【收集整理】Linux下的目录讲解

    Linux下的目录介绍:在Linux系统中,一切东西都是存放在一个唯一的“虚拟文件系统”中的,这个“虚拟文件系统”是树状的结构以一个根目录开始.以文件来表示所有逻辑实体和非逻辑实体,逻辑实体指文件和目 ...

  4. 使用localstorage及js模版引擎 开发 m站设想

    目前 m站开发的方式,依然请求完整的html,这样造成的问题就是每次请求的数据量过大过多,在没有wifi的情况下,导致页面打开的速度很慢,耗费的流量也较多:访问m站的多是移动端设备,其浏览器的版本都较 ...

  5. zlib1.2.8 编译小记

    官网下载:http://www.zlib.net/ 用vs命令行工具运行zlib-1.2.8\contrib\masmx86\bld_ml32.bat 用vs2012打开zlib-1.2.8\cont ...

  6. php PHP_EOL 常量

    换行符 unix系列用 \n windows系列用 \r\n mac用 \r PHP中可以用PHP_EOL来替代,以提高代码的源代码级可移植性 <?php echo PHP_EOL; //win ...

  7. linux 中 ‘|’的作用

    利用Linux所提供的管道符“|”将两个命令隔开,管道符左边命令的输出就会作为管道符右边命令的输入.连续使用管道意味着第一个命令的输出会作为 第二个命令的输入,第二个命令的输出又会作为第三个命令的输入 ...

  8. python学习_数据处理编程实例（二）

    在上一节python学习_数据处理编程实例(二)的基础上数据发生了变化,文件中除了学生的成绩外,新增了学生姓名和出生年月的信息,因此将要成变成:分别根据姓名输出每个学生的无重复的前三个最好成绩和出生年 ...

  9. 十分钟了解MVVMLight

    十分钟了解MVVMLight   前言: 最近看了看开源框架MVVMLight,一直想写一点笔记,但是文笔欠佳,索性就放弃了.那就来翻译一点文章吧. 由于英文水平和技术水平有限,凡是不妥之处,请大家指 ...

  10. Swift(三.函数)

    一.swift中的函数分为以下几类吧 1>无参无返   2>无参有返 3>有参无返  4>有参有返  5>有参多返 二.看下面几个例子吧 1>无参无返 func a ...