FireFox : addEventListener()方法

IE : attachEvent()方法

为HTML元素添加一个事件监听, 而不是直接对元素的事件属性（如：onclick、onmouseover）赋值。

为HTML元素添加一个事件监听:
1.利用元素事件属性添加事件处理函数
2.attachEvent方法添加事件处理函数

这两种方法处理事件还是有很大区别的！事件属性只能赋值一种方法，即：

button1.onclick = function() { alert(1); };
button1.onclick = function() { alert(2); };
这样后面的赋值语句就将前面的onclick属性覆盖了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Javascript事件监听示例</title>
</head>
<body>
<button id="Button1">测试</button>
<script type="text/javascript">
/// <summary>
/// 添加事件监听
/// </summary>
/// <param name="target">载体</param>
/// <param name="type">事件类型</param>
/// <param name="func">事件函数</param>
function addEventHandler(target, type, func) {
    if (target.addEventListener)
        target.addEventListener(type, func, false);
    else if (target.attachEvent)
        target.attachEvent("on" + type, func);
    else target["on" + type] = func;
}

/// <summary>
/// 移除事件监听
/// </summary>
/// <param name="target">载体</param>
/// <param name="type">事件类型</param>
/// <param name="func">事件函数</param>
function removeEventHandler(target, type, func) {
    if (target.removeEventListener)
        target.removeEventListener(type, func, false);
    else if (target.detachEvent)
        target.detachEvent("on" + type, func);
    else delete target["on" + type];
}

var Button1 = document.getElementById("Button1");
var Button1Click = function() { alert(1); };
addEventHandler(Button1, "click",  Button1Click);
addEventHandler(Button1, "click", function() { alert(2); } );
addEventHandler(Button1, "click", function() { alert(3); } );

removeEventHandler(Button1, "click", function() { alert(2); } ); // 移不出
removeEventHandler(Button1, "click", Button1Click); // 可以移除
</script>
</body>
</html>
而添加事件监听就可以并行。

特别是当团队合作时，事件并行的需求增多，比如：监听document对象的鼠标事件或者window对象的载入事件等。
使用事件属性则会造成事件覆盖掉(第二次会覆盖第一次的)。

添加事件监听:不仅可以对同一事件添加多个处理函数对象，而且不会彼引覆盖，也不会覆盖通过属性添加的函数对象。
他们会按序运行，在IE中：先添加的后运行，而在FF中先添加的先运行。

经过测试IE(8)中先显示3再显示2，而firefox(3)中则先显示2再显示3

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Javascript事件监听</title>
    </head>
    <body>
        <button id="Button1">
            测试
        </button>
        <script type="text/javascript">
            function addEventHandler(target, type, func){
                if (target.addEventListener) 
                    target.addEventListener(type, func, false);
                else 
                    if (target.attachEvent) 
                        target.attachEvent("on" + type, func);
                    else 
                        target["on" + type] = func;
            }
            
            function removeEventHandler(target, type, func){
                if (target.removeEventListener) 
                    target.removeEventListener(type, func, false);
                else 
                    if (target.detachEvent) 
                        target.detachEvent("on" + type, func);
                    else 
                        delete target["on" + type];
            }
            
            var Button1 = document.getElementById("Button1");
   
            Button1.onclick = function(){
                alert("addByAttr1");    
            }
           Button1.onclick = function(){
                alert("addByAttr2");    
            }
            var Button1Click = function(){
                alert(1);
            };
            addEventHandler(Button1, "click", Button1Click);
            addEventHandler(Button1, "click", function(){
                alert(2);
            });
            addEventHandler(Button1, "click", function(){
                alert(3);
            });
            
            removeEventHandler(Button1, "click", function(){  //移不出(原因：此处为一个新的匿名对象，其实是移除了该匿名对象)
                alert(2);
            });
            removeEventHandler(Button1, "click", Button1Click);//能移除(原因：此处为对象引用，移除引用对象)
        </script>
    </body>
</html>

JS监听关闭浏览器事件:http://wenku.baidu.com/view/4158f76aaf1ffc4ffe47ac67.html

Javascript事件监听的更多相关文章

  1. javascript事件监听与事件委托

      事件监听与事件委托 在js中,常用到element.addEventListener()来进行事件的监听.但是当页面中存在大量需要绑定事件的元素时,这种方式可能会带来性能影响.此时,我们可以用事件 ...

  2. JavaScript事件监听以及addEventListener参数分析

    事件监听 在Javascript中事件的监听是用来对某些操作做出反应的方法.例如监听一个按钮的pressdown, 或者获取鼠标左键按下时候鼠标的位置.这些都需要使用监听来完成.监听的函数很简单:ad ...

  3. 在Javascript中监听flash事件(转)

    在Javascript中监听flash事件,其实有两种做法: 1.在特定的环境下(例如专门制作的flash),大家约定一个全局函数,然后在flash的事件中用ExternalInterface.cal ...

  4. JavaScript的事件监听、捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调函数来进行相关的操作. 而JavaScript中事件监听的方法总共有三种,分别如下: element. ...

  5. （12）JavaScript之[事件][事件监听]

    事件 /** * 事件: * onload 和 onunload 事件在用户进入或离开页面时被触发 * * onchange事件常结合对输入字段的验证来使用 * onmouseover 和 onmou ...

  6. Javascript事件模型系列（三）jQuery中的事件监听方式及异同点

    作为全球最知名的js框架之一,jQuery的火热程度堪称无与伦比,简单易学的API再加丰富的插件,几乎是每个前端程序员的必修课.从读<锋利的jQuery>开始,到现在使用jQuery有一年 ...

  7. javascript的事件监听与捕获和冒泡

    在前端开发中,我们经常需要对某些事件进行监听.这样只要在指定的元素上触发了该事件,就会执行一个回调来进行相关的操作. 而js中事件监听方法总共有三种,分别如下所示: element.addEventL ...

  8. Node.js 教程 05 - EventEmitter(事件监听/发射器 )

    目录: 前言 Node.js事件驱动介绍 Node.js事件 注册并发射自定义Node.js事件 EventEmitter介绍 EventEmitter常用的API error事件 继承EventEm ...

  9. 让 select 的 option 标签支持事件监听（如复制操作）

    这标题,让option支持事件监听,应该不难的呀,有什么好讲的? 其实还是有的,默认在浏览器代码是无法直接对option标签进行操作的,不仅包括JS事件监听,还是CSS样式设置 查了一些资料,姑且认为 ...

随机推荐

  1. UML 之 用例图

    用例图是指由参与者(Actor).用例(Use Case)以及它们之间的关系构成的用于描述系统功能的静态视图.用例图(User Case)是被称为参与者的外部用户所能观察到的系统功能的模型图,呈现了一 ...

  2. Scala数据类型中的Symbol（符号文本）

    1.属于基本类型,被映射成scala.Symbol 2.当两个Symbol值相等时,指向同一个实例 3.Symbol类型存在的意义:作为不可变的字符串,同时不必重复地为相同对象创建实例,节省资源.这类 ...

  3. BLDC之六种霍尔检测换相排序表

    /* 1 BLDC 的六种霍尔换相排列表 2 包含正反转 */ //#define BLDC_HALL_CAB //-- //#define BLDC_HALL_CBA //#define BLDC_ ...

  4. ACM 刷题错误总结 持续更新并持续回想中o(╯□╰)o

    一.段错误/RE 1.& 变量取地址 2.数组越界 3.爆栈, 非常可能是死循环,ruturn的边界没有处理好,或者是递归的内容里有死循环的部分. 4.线段树 逢写必错,都是build(i*2 ...

  5. 〖Linux〗Bash快捷键使用

    这篇 Bash Shell Shortcuts 的快捷键总结的非常好.值得学习.下面内容大多数是拷贝粘贴与总结. CTRL 键相关的快捷键: Ctrl + a - Jump to the start ...

  6. 我的项目7 js 实现歌词同步（额，小小的效果）

    在项目中须要做一个播放器,还要实现歌词同步的效果,就跟如今搜狗音乐的歌词同步差点儿相同,在网上查了一些关于这方面的.整理了一下,在这里,其有用这种方法能够吗? <!DOCTYPE html> ...

  7. Centos6 安装 Redis 和集群配置

    Redis安装 先确认gcc和tcl已经安装 sudo yum install gcc-c++ sudo yum install tcl 解压, 编译和安装 .tar.gz /usr/src/ cd ...

  8. 如何在 Android 手机上安装 Ubuntu 13.04

    在农村,一切都是相对的. 长话短说,我已经厌倦了我们在农村做的一个小小的突破. 我本该去放松,读了一大堆东西涉及到自然语言的处理.但是因为我这些天一直在修改LXC和chroot的时候,我决定将我的An ...

  9. sqlserver学习笔记（一）—— 登录本机sqlserver、启动和停止sqlserver服务、创建和删除数据库

    (重要参考:51自学网——SQL Server数据库教程) 首先按照网上教程安装好sqlserver,打开登录 登录本机sqlserver:①. ②localhost ③127.0.0.1 启动和停止 ...

  10. windows下LIB和DLL的区别与使用

    共有两种库: 一种是LIB包含了函数所在的DLL文件和文件中函数位置的信息(入口),代码由运行时加载在进程空间中的DLL提供,称为动态链接库dynamic link library. 一种是LIB包含 ...