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. xcode的svn和git使用方法

    1.创建版本库:(参考:http://blog.csdn.net/itianyi/article/details/8601183) 方法:直接在windows服务器安装VisualSVN Server ...

  2. Intent的用法总结（不进你会后悔的）

    下面列出几种Intent的用法 下面的代码片段通过谷歌搜索 Intent intent = new Intent(); intent.setAction(Intent.ACTION_WEB_SEARC ...

  3. QtGui.QCalendarWidget

    A QtGui.QCalendarWidget provides a monthly based calendar widget. It allows a user to select a date ...

  4. Android调用OCR识别图像中的文字

    // CharacterExtractor.java // Copyright (c) 2010 William Whitney // All rights reserved. // This sof ...

  5. Linux 监测磁盘常用的工具sar iostat vmstat

    Linux 检测内存常用的工具sar iostat vmstat #每秒刷新一次显示2次 sar -d 1 2 iostat -kx 1 2 vmstat -d 1 2 磁盘统计信息解释 tps 每秒 ...

  6. android开发之数据库游标未关闭导致

    replacements=[Ljava.lang.String;@4192fea8HARDWARE=hw7d501lmatchers=[Ljava.lang.String;@4192fe28RADIO ...

  7. 安卓平台下ARM Mali OpenCL编程-GPU信息检测（转）

    对于ARM Mali GPU,目前是支持OpenCL1.1,所以我们可以利用OpenCL来加速我们的计算. 一直以来,对于Mali GPU的OpenCL编程,一直没有环境来测试.好不容易弄到一个华为M ...

  8. （四）hibernate关联映射之——一对多映射

    0.   映射分四种类型: 一对多 多对一 一对一 多对多 前两者最常用 1.单向一对多关联 1.1  如何在JAVA和数据库中表示一对多的关系. 2.多对一关联 以学生对应班级来解释 步骤(1)创建 ...

  9. 安装 Percona XtraBackup 2.3

    Installing Percona XtraBackup from Percona yum repository Install the Percona repository You can ins ...

  10. Linux命令-文件搜索命令:whereis

    主要用途:查找linu命令,而不是磁盘上的普通文件,并且能看到命令的目录和帮助文件. whereis useradd 查找命令useradd的所在位置,同时还查出来它的帮助文件所在位置 whereis ...