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

Question

Это вопрос, на который я столкнулся, чтобы развернуть событие JavaScript на элементе. У меня есть несколько элементов выбора, которые условно будут иметь одно событие 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-лайнер «установить глобальную переменную ложь» к исходной функции.

Answer 1

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

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

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

//– 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 - https://developer.mozilla.org/en/DOM/element.addEventListener

Answer 3

Вы хотите посмотреть на 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 4

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

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

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

Кроме того, вы можете также активировать пользовательские события, если ваши потребности сложны. Например, вместо «интерпретации» onChange, возможно, существует способ специально инициировать пользовательские события. См. Страницу last example на странице jQuery.

Answer 5

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

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

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

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

W3C/методы Microsoft

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

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

Answer 7

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

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

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