首页 > 代码库 > Javascript事件监听

Javascript事件监听

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