Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Возможно ли создать событие?

Автор: Ghirik 8.9.2007, 13:07

Просвятите, пожалуйста.

Есть ли в JavaScript или DOM возможность назначить своё событие. Ну, типа, как создаются динамические объекты, так же назначить событие для объекта. Например, чтобы по совпадению условий происходило событие.

Автор: dXdYdZ 8.9.2007, 19:25

Код


var evt = new Array();

JSL.addEvent=function(tag,name,obj,f,params)
{
po = {t: tag, n: name, o: obj, f: f, params: params};
evt.push(po);
var s="evt["+(evt.length-1)+"].f1=function(e){ evt["+(evt.length-1)+"].f.call(evt["+(evt.length-1)+"].o,e,evt["+(evt.length-1)+"].params) }";
if(obj != null) eval(s); else evt[evt.length-1].f1=f;
//alert(name+": "+(evt.length-1));
if(tag.addEventListener) { tag.addEventListener(name, evt[evt.length-1].f1, false); }
else { tag.attachEvent('on'+name, evt[evt.length-1].f1); }
}

JSL.removeEvent=function(tag,name,obj)
{
var n;
for(n=0;n<evt.length;n++)
  if((evt[n].t==tag)&&(evt[n].n==name))
    {
    //alert(name);
    if(obj) if(obj!=evt[n].o) continue;
    //alert(name);
    if(tag.removeEventListener) { tag.removeEventListener(name, evt[n].f1, false); }
      else { tag.detachEvent('on'+name, evt[n].f1); }
    evt.splice(n,1);
    }
delete n;
}

Автор: Ghirik 8.9.2007, 19:40

dXdYdZ, я видел этот код в вашей http://dojo.com.ua/JSL/, но честно скажу, я не могу в нем разобраться. Очень вас прошу, покажите на простом примере. К примеру, чтобы событие рождалось при изменении любого из свойств объекта.

Автор: dXdYdZ 8.9.2007, 20:38

В JavaScript присутствуют стандартные виды событий. Прочитать о них можно,
например, http://wdh.suncloud.ru/dhtml12.htm#ref4124. Для динамического (с помощью JavaScript) подключениия обработчиков событий с помощью представленных выше функций

tag-Узел DOM, к которому подключаем событие.
name-Имя события. Например для события onmouseover name=mouseover.
f-функция, которая будет вызвана при возникновении события. Должна иметь 2 параметра. Первый - объект "event" (Прочитаете о нём в приведённой выше ссылке).
Второй - объект, в который передаются параметры из объекта params функции JSL.addEvent. Это нужно для того, чтобы при возникновении события передать функции какие-либо константы.
obj-объект, в контексте которого будет вызвана функция f (то есть если object!==null, то this в функции f будет равен obj).
params-константы, которые будут переданы в функцию f во втором параметре.

Пример использования:
Есть узел, к нему надо прицепись событие обработки наведения мыши

Код


<div id="1"></div>

Код


fe=function(evt,params)
{
alert(params.a);
}

JSL.addEvent(document.getElementById("1"),"mouseover",null,fe,{a: 10});

Отключить событие можно так:

Код


JSL.removeEvent(document.getElementById("1"),"mouseover",null);

Автор: Ghirik 8.9.2007, 22:15

Большое спасибо, пример стал понятен, но...
Мне нужно создать своё событие например у фона страницы изменился цвет, это есть событие. И мне нужно при изменении цвета фона на красный(к примеру), выполнить функцию. Вы предлогаете подключить имеющиеся в HTML, DOM, или ещё где, события. В IE есть для таких случаев событие propertychange, но Mozilla его не поддерживает. Я и подумал, а нельзя ли самому описать условия возникновения своего события.
Mozilla поддерживает какие нибудь события, возникающие при изменении атрибутов, свойств или стилей?

Автор: dsCode 9.9.2007, 00:18

Ghirik, Вам нужно среагировать на изменение фона. Реакция в данном случае - есть обработчик Вашего события onBackgroundChange (имя придумайте сами). Реакция так же - всего лишь функция, вызванная в нужное время - в Вашем случае - когда меняется фон (в том месте, где Вы меняете фон, - вызывайте обработчик данного события).

Автор: Ghirik 9.9.2007, 02:27

Ммм, да...
Действительно, плохо формулирую вопросы....
Но, похоже, ответ на вопрос "можно ли создать своё событие" получил - нельзя. У Вас наверное даже в голове не укладывается, как такое можно спрашивать. smile

Это я от плохого представления всей иерерхии Объекты-Методы-События. Уж извините, что мозги запудрил.

Автор: dsCode 9.9.2007, 12:50

Ghirik, это смотря с какой стороны смотреть. Я Вам сказал, что можно создать абсолютно любое СВОЕ событие, но все зависит от контекста. Если говорить о стандартных объектах (таких как в Вашем примере - бэкграунд и т.п.) - то точно не скажу, скорей всего, придется ограничиться стандартными событиями, доступными в конкретной версии JS и браузера (событиями, об атаче и ремуве которых говорит
dXdYdZ). Но! Если Вы пишите свой фреймворк со своими тегами, то СВОЕ событие (а точнее сказать - возникновение своего события) - это ничто иное, как вызов определенного "метода"/функции в нужное время. Однако, Ваши события будут в любом случае порождены от стандартных событий. В сущности, СВОИ события - это даже не совсем события, лучше сказать псевдособытия - просто так удобней.

Где-то вы описываете "метод"/функцию onSelectRow(...) (тут придумайте все, что угодно - onChangeProperty, onLoadData и т.д.). Далее, пример с таблицей ("класс таблицы"): в СТАНДАРТНОМ событии onClick для ряда таблицы, Вы вызываете свой метод onSelectRow с нужными параметрами. Нужные параметры - это в данном случае "параметры из объекта таблицы". Таким образом - единожды описав в "классе" для работы с таблицей событие onClick (и то, что оно вызовет "событие", onSelectRow), далее в каждом из объектов этого "класса" Вы можете использовать событие onSelectRow(нужный_параметр_касающийся_конкретного_объекта_"класса").

Автор: Ghirik 9.9.2007, 14:10

dsCode, спасибо, а если зациклить(запустить сразу сотню таймаутов) setTimeout, как я делал в этой функции:

Код


function on(i){
    if    (i.style.opacity){
    var    c=i.style.opacity*100}
    else{
    var    c=i.filters.alpha.opacity}
    for    (c;c<=100;c++){
        setTimeout('op('+c+','+i.id+')',2*c)}}

Идентификаторы я могу сложить в массив, но как потом отследить, что закончился определенный таймаут? Вот здесь бы очень пригодилось поддерживаемое браузером событие "onOpacity".
В IE наверное можно применить имеющийся обработчик события propertychange, а в других....
Конечно, можно не запускать не контролируемые задания, но мне очень нравится такой подход, задал задание и забыл.... Произошло событие, обработал.

Автор: dsCode 9.9.2007, 15:55

Ghirik, не совсем понял, зачем идентификаторы в массив (ну надо, так надо). А по поводу "закончился определенный тайм-аут": вообще, JavaScript не мультипоточный (в полном понимании этого слово) язык. Он имеет всего 2 (два) потока - основной и поток setTimeout'a (и setInterval'a). На основе этого можно создать псевдо-мультипоточность. То, что Вы запускаете 100 сетТаймаутов вероятно должно означать, что функции во втором потоке выстроятся в зависимости от назначенного времени. В Вашем случае можно поступить как я и говорил выше - поймать Ваше onOpacity в нужном месте (Вы же сами правильно сказали в первом посте "чтобы по совпадению условий происходило событие" - это, опять же, ничто иное, как вызов в нужное время нужной функции):

Код


<span id="test"></span>

    <script type="text/javascript">

      function on() {
        var i = 1;
        var c = 2;
        setTimeout('op('+c+','+i+')', 10000);
        c++; i++;
        setTimeout('op('+c+','+i+')', 1000);
        c++; i++;
        setTimeout('op('+c+','+i+')', 5000);
        c++; i++;
        setTimeout('op('+c+','+i+')', 1000);
      }

      function op(c, id) {
        onOpacity(c, id);
      }

      function onOpacity(c, id) {
        document.getElementById("test").innerHTML += c + " ::: " + id + "<br />";
      }
      on();
    </script>

Каждый тайм-аут сработает в нужное время и вызовет Ваше "событие" onOpacity, в котором уже Вы вольны делать все, что захотите.
Я специально сделал 4 тайм-аута, начиная с большего времени и, сделав два тайм-аута с одинаковым временем. Посмотрите - тайм-ауты с 1000 миллисекунд сработают раньше всех но последовательно (выстроенные в очередь во втором потоке). Тайм-ауты с бОльшим временем сработают в свое время - и с нужными значениями.

Автор: Ghirik 9.9.2007, 16:29

Всё понял!!! Большое спасибо за потраченное на разъяснение время. Недавно занимаюсь JavaScript-ом, в голове всё перепутано.... smile