Как развернуть событие onchange с помощью JavaScript

Это вопрос, с которым я столкнулся о расширении события 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-строку "установить глобальную переменную в false" в исходную функцию.

6
html javascript onchange

7 ответов

вы можете обмануть, просто имея составную функцию, которая вызывает другие функции.

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

вы также можете использовать шаблон наблюдателя, описанный в книге Pro JavaScript Шаблоны Проектирования. У меня есть пример его использования в статье (здесь).

//– 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; 
};
9

вы хотите посмотреть 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);
}

вы можете добавить несколько прослушивателей к каждому элементу, поэтому при возникновении события можно вызвать несколько функций.

2

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

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

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

и вы также можете изучить запуск пользовательских событий, если ваши потребности сложны. Например, вместо "интерпретации" onChange, возможно, есть способ специально инициировать пользовательские события. Вижу последний пример на странице jQuery.

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
    });
}

это в основном позаботится о совместимости браузера, а также.

2

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

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

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

консорциум W3C / Майкрософт методы

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

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

1
1

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

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

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