Javascript事件監聽

時間 2019-11-13

標籤 javascript 事件監聽欄目 JavaScript 简体版

原文原文鏈接

FireFox : addEventListener()方法javascript

IE : attachEvent()方法html

爲HTML元素添加一個事件監聽, 而不是直接對元素的事件屬性（如：onclick、onmouseover）賦值。java

爲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;
}ui

/// <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];
}firefox

removeEventHandler(Button1, "click", function() { alert(2); } ); // 移不出
removeEventHandler(Button1, "click", Button1Click); // 能夠移除
</script>
</body>
</html>
而添加事件監聽就能夠並行。htm

特別是當團隊合做時，事件並行的需求增多，好比：監聽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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。