Блог

Главная - Вопросы по программированию - Пользовательское событие в HTML, Javascript

Пользовательское событие в HTML, Javascript

#javascript #html #events #custom-event

#javascript #HTML #Мероприятия #пользовательское событие

Вопрос:

Я хочу создать пользовательское событие в HTML, JS.

 <input type="text" oncustombind="foo(event);" />

Как я могу создать одно такое? ‘oncustombind’ — это пользовательское событие, которое я хочу создать. Я должен иметь возможность вызывать функцию / код, определенный в атрибуте oncustombind. Кроме того, мне нужно передать некоторые данные объекту события.

Я не хочу использовать какие-либо библиотеки, такие как jquery, YUI.

Любая помощь будет высоко оценена.

Комментарии:

1. Кроме того, встроенный javascript в HTML — это большой грязный взлом. Не делайте этого.

2. С момента публикации вопроса времена изменились. В настоящее время веб-компоненты становятся жизнеспособным способом замены фреймворков js. Наличие встроенных пользовательских событий было бы действительно полезно для написания кода, который можно легко прочитать (аналогично angular / react). Один хороший трюк — поделиться this контекстом веб-компонента с использованием элемента chidlren dom Object.assign . Таким образом, любой выбранный элемент Dom может иметь доступ к методам, определенным в классе web components. Было бы еще приятнее иметь доступ к пользовательским событиям из встроенных пользовательских обработчиков событий.

Ответ №1:

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

С ними должно быть легко работать, но поддержка браузера оставляет желать лучшего. Однако DOM-shim должен это исправить.

 var ev = new CustomEvent("someString");
var el = document.getElementById("someElement");
el.addEventListener("someString", function (ev) {
    // should work
});
el.dispatchEvent(ev);

Ответ №2:

Использование new Function and — плохая практика with , но этого можно добиться следующим образом: http://jsfiddle.net/pimvdb/72GwE/13 /.

 function trigger(elem, name, e) {
    var func = new Function('e',

      'with(document) {'
      'with(this) {'
      elem.getAttribute('on'   name)
      '}'
      '}');

    func.call(elem, e);
}

Со следующим HTML:

 <input type="text" oncustombind="console.log(e, type, getElementById);" id="x">

затем запустите событие, подобное:

 trigger(document.getElementById('x'), 'custombind', {foo: 123});

Комментарии:

1. @Raynos: Что бы вы использовали, чтобы создать window , document , event и e быть в области видимости? Нет лучшего способа, чем with …

2. в рамках чего? window , document , elem и e уже находятся в области видимости.

3. @Raynos: В атрибутах событий HTML вы можете автоматически получать атрибуты и document функции, например getElementById , без document. добавления.

4. @pimvb … Вот почему мы не используем встроенные обработчики событий и грязные хаки. Все знают, что javascript в HTML — это большой запрет.

5. ваш хак «получить его в области видимости» даже не работает

Метки: ,