如何使用JavaScript擴展onchange事件

Question

這是我在擴展元素的JavaScript onchange事件時遇到的一個問題。 我有幾個select元素有條件地將每個onchange事件附加到每個元素上（當它們更改為特定值時，它會隱藏/取消隱藏某些元素）。 我想有條件地添加或附加到另一個onchange事件，以便他們設置一個全局變量，如果他們確實更改而不修改或禁用已附加到它們的上一個函數。 有沒有辦法“附加”附加功能或在現有功能上添加更多功能？

以下是我認為的例子：

<select id="selectbox1">
    <option>...</option>
    <option>...</option>
</select>

if (<certain conditions>) {
    document.getElementById("selectbox1").onchange = function () { 
        //hides elements to reduce clutter on a web form ...
    }
}
....
if (<other conditions>) {
    document.getElementById("selectbox1").onchange = function2 () {
        //set global variable to false
    }
}

或者，我想簡單地將1-liner“set global variable to false”添加到原始函數中。

Answer 1

你可以通過簡單地使用一個調用其他函數的復合函數來作弊。

document.getElementById("selectbox1").onchange = function() {
    function1();
    function2();
}

您還可以使用Pro JavaScript Design Patterns一書中描述的觀察者模式 。 我在一篇文章（ 這里 ）中有一個例子。

//– publisher class — 
function Publisher() { 
    this.subscribers = []; 
};

Publisher.prototype.deliver = function(data) { 
    this.subscribers.forEach(function(fn) { fn(data); }); 
};

//– subscribe method to all existing objects 
Function.prototype.subscribe = function(publisher) { 
    var that = this; 
    var alreadyExists = publisher.subscribers.some(function(el) { 
        if (el === that) { 
            return; 
        } 
    });

    if (!alreadyExists) { 
        publisher.subscribers.push(this); 
    } 
    return this; 
};

Answer 2

您想要查看addEventListener()和attachEvent()函數（分別用於基於Mozilla的瀏覽器和IE）。

看一下addEventListener（）和attachEvent（）的文檔。

var el = document.getElementById("selectbox1");

try { //For IE
    el.attachEvent("onchange", function(){ code here.. });
}
catch(e) { //For FF, Opera, Safari etc
    el.addEventListener("change", function(){ code here.. }, false);
}

您可以為每個元素添加多個偵聽器，因此在事件觸發時可以調用多個函數。

Answer 3

你能用jQuery嗎？ 這將允許您非常輕松地綁定/操作/取消綁定事件。 唯一的障礙是事件處理程序按它們綁定的順序激活。

if (<certain conditions>) {
   $("#selectbox1").bind("change", eventdata, function1);
}

if (<other conditions>) {
   $("#selectbox1").bind("change", eventdata, function1);
}

而且，如果您的需求很復雜，您還可以考慮觸發自定義事件。 例如，可能有一種方法可以專門觸發自定義事件，而不是“解釋”onChange。 請參閱jQuery頁面上的最后一個示例 。

Answer 4

如果你使用jquery，你會有類似的東西

<select id="selectbox1">
    <option>...</option>
    <option>...</option>
</select>

if (<certain conditions>) {
    $("#selectbox1").change(function () { 
        //hides elements to reduce clutter on a web form ...
    });
}
....
if (<other conditions>) {
    $("#selectbox1").change(function () { 
        //set global variable to false
    });
}

這也將主要考慮瀏覽器兼容性。

Answer 5

我覺得我可能會遺漏一些關於你問題的重要內容，但這個更簡單的解決方案對你不起作用嗎？

只需檢查onChange事件內部的條件，並根據需要執行操作。 不必動態地重新添加/刪除事件監聽器這會容易得多

document.getElementById("selectbox1").onchange = function () { 
    if (<certain conditions>) {       
     //hides elements to reduce clutter on a web form ...
    }
    if (<other conditions>) { ... }
}

Answer 6

看看addEventListener - https://developer.mozilla.org/en/DOM/element.addEventListener

Answer 7

目前有三種不同的方法來定義事件處理程序（在檢測到某個事件時觸發的函數）：傳統方法，W3C方法和Microsoft方法。

傳統方法

在傳統方法中，事件處理程序是通過在Javascript中設置元素的on event屬性（就像在示例代碼中所做的那樣）來定義的，或者通過在HTML標記中設置on event屬性來定義（例如<select onchange="..."> ）。 雖然這是最簡單的使用方法，但它的使用現在通常不受歡迎，因為正如您所發現的那樣，它是相當嚴格的 - 向已經附加了事件處理程序的元素添加和刪除事件處理程序並不容易。 同樣，將javascript與HTML混合不再被認為是正確的做法，而是應該包含在<script>標簽中或通過<script>標簽加載。

W3C / Microsoft方法

W3C（萬維網聯盟）和微軟都定義了自己的事件模型。 這兩個模型的工作方式基本相同，但使用不同的語法。 Microsoft模型用於Internet Explorer，W3C模型用於其他瀏覽器（Firefox，Opera，Safari，Chrome等）。 在這兩個模型中，都提供了添加事件處理程序的函數（用於W3C的addEventListener，用於Microsoft的attachEvent）和刪除事件處理程序（removeEventListener / detachEvent）。 這允許您動態添加和刪除元素的特定處理程序; 在您的情況下，您可以根據第一個條件添加第一個處理程序，根據第二個條件添加第二個處理程序。 這些方法的“問題”是它們中有兩個，因此需要使用這兩種方法以確保您的事件處理程序將在所有瀏覽器中注冊（兩個模型之間也存在一些細微差別，但這些差異對於這個問題的范圍並不重要）。 事實上，如果你看，你會發現大量的“addEvent”函數，它們在必要時使用這兩種方法（通常可以回溯到舊瀏覽器的傳統方法）。 例如，比賽於2005年在QuirksMode博客上運行，以構建最佳的“addEvent”功能，其結果（以及獲勝功能）可以在這里看到。

同樣，如果您使用諸如Prototype或jQuery之類的javascript庫，它們會帶有內置的事件處理函數，可以為您處理上述事務。