Пример использования пользовательских событий

[Alexander_N]

Отличные примеры. Неплохо было бы увидеть в статье код скриптов, немого неудобно его вылавливать в страницах, тем более что на той страничке с примером подгружается еще несклько js файлов.

[homm]

Только jQuery. Весь остальной код и даже картинки внутри html.

[xzander]

ну, например, такое делать не обязательно:

Когда понадобилось сделать .another-link1 (который гипотетически находится вообще в другом файле, просто должен открывать тоде самое окно), пришлось повторить весь код, отвечающий за показ

можно было просто добавить через запятую селектор в первый вызов:
$('#not-envents .link1, #not-envents .another-link1')

и гораздо интереснее был бы вариант сравнения подхода trigger и обычных функций

[homm]

можно было просто добавить через запятую селектор в первый вызов:

Я же как раз написал, что описание поведения элементов, которые должны открывать один и тот-же блок (имеются ввиду .link1 и .another-link1) может быть разнесено по разным js-файлам, или по крайней мере по разным логическим местам одного файла (например, .link1 это ссылка в сайдбаре, а .another-link1 — на главной, описание их одним селектором явно не добавит коду читаемости).

[vodka_ru]

Слово «не правильная» пишется слитно, а само направление мыслей правильное ;)

[Ewg]

Автор пытается сказать, что никто не использует функции, а он такой правильный…

[hTLK]

А как быть, если надо в обработчик пользовательского события передать какие-то дополнительные данные? Это я спрашиваю к тому, что обычно юзаю навешиваю свои функции прямо

[hTLK]

Случайно нажалось написать :(

[hTLK]

Я имел в виду, что навешиваю свои функции прямо на нужные мне DOM элементы и потом работаю именно с ними. Получается что div — это не просто div, а некое объектное представление всплывающего окошка с функциями вроде Show и Hide.

[homm]

Если вы работаете без использования фреймворков, такой подход равнозначен описанному мной. Если работаете с jQuery, всетаки его селекторы и прочие вкусности использовать удобнее.

[homm]

Без проблем.

$("p").click( function (event, a, b) {
 // when a normal click fires, a and b are undefined
 // for a trigger like below a refers to "foo" and b refers to "bar"
} ).trigger("click", ["foo", "bar"]);

* This source code was highlighted with Source Code Highlighter.

[hTLK]

Вот это меня и интересовало, спасибо :) Недавно просто начал переходить на jQuery.

[kachkaev]

Извините за замечание, но, возможно, следовало бы проверить орфографию Ваших комментариев на английском… Ну, или хотя бы на русском написали их:)

[Wott]

Супер!

я бы для линков повесил атрибут name в котором бы указал класс или ID связанного div-а. И bind выглядел бы попроще и универсальнее:

<a href="#" class="link" name="window1">show 1</a>
<a href="#" class="link" name="window2">show 2</a>

...

$('#envents .link').click(function(){
  $('#envents .'+$(this).attr('name')).trigger('showfloat');
  return false;
})

* This source code was highlighted with Source Code Highlighter.

[funca]

Для целеуказания по id лучше использовать a.href.

<a class="link" href="#target">click me</a>

<div id="target"></div>
...
$('.link').click(function() {
  $(this).attr('href').trigger('showFloat');
  return false;
}}

[homm]

Если продолжить тему, то нужно сделать нормальный переход на якорь #target, и с какой-то периодичностью проверять значение якоря в адресе. Тогда, если скинуть другому пользователю ссылку с якорем, он тоже увидит открытое окошко. Это еще называют Ajax-навигацией.

[consolamentor]

А как сделать, чтобы окно не прыгало к этому якорю (или вверх окна)?
Я не специалист в js, но видимо здесь нужно использовать event.preventDefault()? Не отменит ли это и вставку якоря в адрес?
Также, при таком способе, как я понимаю, нельзя передать дополнительные параметры (как просят сверху ↑).

[consolamentor]

Ссылка не сработала: habrahabr.ru/blogs/jquery/67185/#comment_1896788

[homm]

А как сделать, чтобы окно не прыгало к этому якорю?

Нужно чтобы на странице не такого якоря. Текстовые параметры передаются в этой же строке. С объектами сложнее.

[consolamentor]

Если сделать ссылку на несуществующий якорь, то браузер прыгнет в топ, или к самой ссылке.

[Alexander_N]

Люблю такие статьи! Вроде ничего нового для себя не узнал, казалось бы, но повторение — мать учения. Плюс статьи в том что добавляет прозрачность в код и выстраивается четкая, понятная стуктура.
Bind и trigger сам использую давно. Помню один раз очень мне помогли, сами знаете ie на что только ни способен лишь бы работать неправильно. Вобщем дело было в следующем аяксовой форме клик по лейблу то ли не срабатывал, то ли не запускал нужное действие (сейчас точно уже не помню), так вот bind и trigger все вернули в нужное русло.

[funca]

Вот за что я не люблю jQuery, так это за то как, он относится к пользовательским событиям. Пример:
$().bind('test', function() { window.console.log('test1') })
$().bind('test', function() { window.console.log('test2'); throw 'Error!'; })
$().bind('test', function() { window.console.log('test3') })
$().trigger('test');
...
test1
test2
Error!

'test3' нет. Т.е. если какой-то обработчик обломался и бросил исключение, то обработчики, стоящие в цепочке после него, событие не получат.

C практической точки зрения, события используются в том случае, когда необходимо синхронизировать работу ряда _независимых_ приложений. Поэтому глюки отдельного обработчика не должны влиять на диспетчеризацию события (если только он явно не вызвал event.stopImmediatePropagation()). Это же не поток.

В других фреймворках (том же prototype.js) такого глюка нет.

[homm]

Я считаю, тут нужно смотреть не на поведение других фреймворков, а на поведение чистого JS+DOM. Если в нем исключение не останавливает цепочки выполнения, нужно слать багрепорт разработчикам jQuery.

[funca]

Вот так, через дом2:

<a id='target'>click me</a>

$('#target').get(0).addEventListener('click', function(e) { window.console.log('test1') }, false)
$('#target').get(0).addEventListener('click', function(e) { window.console.log('test2'); throw "Error1"; }, false)
$('#target').get(0).addEventListener('click', function(e) { window.console.log('test3') }, false)

...
test1
test2
test3
Error!

[shutnik]

ждём ещё про jQuery ;)

[django]

А чего ждать, все тонны остальных статей, что гугл выдаст, уже прочитали?

[ksupipr]

Пишем в данный момент браузерку, использую JQuery, весьма помогает подобная работа с событиями.

Еще весьма интересная тема по поводу перетаскивания объектов. Этоя в плане хотелось бы подобную статейку. )

[nicothin]

… и если понадобиться…

«ь» лишний.