Как расширить событие onchange с помощью JavaScript

Question

Это вопрос, с которым я столкнулся при расширении события onchange элемента JavaScript. У меня есть несколько элементов 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-строчный "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

Если вы используете 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 3

Можете ли вы использовать JQuery? Это позволит вам легко связывать / манипулировать / отменять привязку событий. Единственное препятствие - обработчики событий активируются в том порядке, в котором они связаны.

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

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

И, кроме того, вы можете посмотреть на запуск пользовательских событий, если ваши потребности сложны. Например, вместо «интерпретации» onChange, возможно, есть способ специально запускать пользовательские события. См. последний пример на странице jQuery.

Answer 4

Вы хотите взглянуть на функции 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 5

Мне кажется, что я могу упустить что-то важное в вашем вопросе, но разве это более простое решение не сработает для вас?

Просто проверьте условия внутри события onChange и выполните необходимые действия. Это будет намного проще, чем необходимость динамически повторно добавлять / удалять EventListeners

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

Answer 6

В настоящее время существует три различных метода определения обработчиков событий (функция, которая запускается при обнаружении определенного события): традиционный метод, метод W3C и метод Microsoft.

Традиционный метод

В традиционном методе обработчики событий определяются установкой свойства on event элемента в Javascript (как вы делаете в своем примере кода) или установкой события on атрибут в теге HTML (например, <select onchange="...">). Несмотря на то, что это самый простой метод, его использование обычно не одобряется, поскольку, как вы обнаружили, он довольно жесткий - нелегко добавлять и удалять обработчики событий для элемента, к которому уже подключен обработчик событий. Кроме того, больше не считается правильной практикой смешивать JavaScript с HTML, но вместо этого он должен содержаться внутри или загружаться с помощью тега <script>.

W3C / методы Microsoft

W3C (World Wide Web Consortium) и Microsoft определяют свои собственные модели событий. Две модели работают по существу одинаково, но используют разные синтаксисы. Модель Microsoft используется в Internet Explorer, а модель W3C используется в других браузерах (Firefox, Opera, Safari, Chrome и т. Д.). В обеих этих моделях предусмотрены функции для добавления обработчиков событий (addEventListener для W3C, attachEvent для Microsoft) и удаления обработчиков событий (removeEventListener / detachEvent). Это позволяет вам динамически добавлять и удалять определенные обработчики для элемента; в вашем случае вы можете добавить первый обработчик на основе первого условия, а второй - на основе второго условия. «Проблема» в этих методах заключается в том, что их два, и поэтому необходимо использовать оба метода, чтобы гарантировать, что ваш обработчик событий будет зарегистрирован во всех браузерах (между этими двумя моделями также есть несколько тонких различий, но эти различия не важны для объема этого вопроса). На самом деле, если вы посмотрите, вы найдете большое количество функций «addEvent», которые используют оба метода по мере необходимости (и, как правило, прибегают к традиционному методу для старых браузеров). Например, в 2005 году в блоге QuirksMode был проведен конкурс на создание лучшей функции «addEvent», в результате которой (наряду с функцией-победителем) вы можете увидеть здесь .

Также, если вы используете библиотеку javascript, такую ​​как Prototype или jQuery, они поставляются со встроенными функциями обработки событий, которые позаботятся о вышеупомянутом.

Answer 7

Посмотрите на addEventListener - https://developer.mozilla.org/en/DOM/element.addEventListener