Как вызвать событие на javascript

Question

[Alex Pts]

Как вызвать любое событие на чистом javascript, в том числе и пользовательское, если это возможно?

В jQuery это делается методом .trigger(), но хочется понять основу.
Буду благодарен за ссылки по теме, которые помогут понять механизм событий в чистом js, чтобы потом уже над своей реализацией триггеров как в jQuery подумать.

Answer 1

[termi]

Во всех современных браузерах можно создать событие используя конструктор

document.documentElement.addEventListener("click", function(e) {
  console.log(e.type, e);
})
document.documentElement.addEventListener("magic", function(e) {
  console.log(e.type, e);
})

var event = new Event("click", {bubbles : true, cancelable : true})
var customEvent = new CustomEvent("magic", {bubbles : true, cancelable : true, detail : "<any string data>"})

document.documentElement.dispatchEvent(event);
document.documentElement.dispatchEvent(customEvent);

Совместимость со старыми браузерами можно обеспечить с помощью polyfill библиотек

Comments

[ZardoZAntony]

Один только минус: jQuery дает менять event.target, а чистый js нет.

Answer 2

[Михаил Крайнов]

Гугл говорит вот так:
stackoverflow.com/questions/2490825/how-to-trigger-event-in-javascript
darktalker.com/2010/manually-trigger-dom-event/

Сам не пользовал, за работоспособность не ручаюсь.

Comments

[Анатолий]

Работает, я проверял, тока евентов два, эти, и мышиные, в идеале их надо разделять

Answer 3

[m03r]

Вот ещё:
xpoint.ru/forums/programming/javascript/misc/thread/34487.xhtml

IE: fireEvent(),
остальные: document.createEvent()

Если я правильно понимаю, пользовательские события — фреймворк-специфичные.
Кроме того, можно покопать сам jQuery (код не слишком простой, но откомментированный):
github.com/jquery/jquery/blob/8d94ed91e47f68f742b6c282c8de40eb5fa8e140/src/event.js

Кроме того, есть замечательная книжка Дэвида Флэнагана «Javascript. Подробное руководство», в сети где-то валяется pdf-ка, там событиям посвящён целый раздел (50 страниц) :-)

Comments

[m03r]

да, ещё там замечательный справочник в конце есть, книга must have

Answer 4

[egorinsk]

Идея такая. Есть способ для w3c браузеров, есть для IE. В w3c вызывается одна функция для создания объекта события, он заполняется нужными данеыми. и вторая функция, которая запускает распространение этого события, т.е. вызывает слушающие его обработчики. В Ие вроде проще, все делается одной функцией.

Подвохи: в ИЕ нельзя создать кастомное пользовательское событие, только стандартные. Также, запуск события, например, click, только вызывает обработчики onclick(), но не нажимает кнопку, не двигает курсор в поле ввода, ит.д., то есть не делает того же, что и реальный клик мышкой.

Для подробностей ищите слова fireEvent, createEvent, dispatchEvent на сайтах MDN и MSDN.

Answer 5

[Lanrete]

Я так делаю:

var obj = document.getElementById ("obj_name");
if (obj.addEventListener) {
// Все броузеры кроме ИЕ
obj.addEventListener("mousedown", function_name, false);
} else if (obj.attachEvent) {
// Internet Explorer и Opera
val1.attachEvent ("onmousedown", function_name)
}
function function_name() {
alert("Событие "onmousedown" было применено к элементу с ID = "obj_name" ");
}