Имена функций как атрибут HTML

Question

Я знаю, что функции могут храниться в атрибутах html для определенных событий (например, onmouseover), но может ли какой-либо атрибут ссылаться на функцию или только на специальные атрибуты?

Я бы хотел автоматически связывать обратные вызовы AJAX на основе атрибутов формы [например, OnSuccess = "предупреждение ( 'whoohoo');" и onfail = "alert ('You suck');"]. Возможно ли что-то подобное, или я должен был бы сохранить функцию в известном событии и вызвать событие в случае сбоя или успеха?

---

Я хотел бы поделиться кодом результата с SO для пользы сообщества. К сожалению, я не смог использовать data- * в качестве имени атрибута из-за того, что '-' не является допустимым char для имени свойства, а формы создаются с использованием MVC и анонимных типов.

// provide the ability to manually setup a form for ajax processing.
// target are the forms to be wired
// success is the callback function
function AjaxifyForms(target, success, fail) {
    $(target).each(function() {       // Wierdness if each isn't used with validation
        $(this).validate({
            submitHandler: function(form) {
                $.ajax({                                                           //create an AJAX request
                    type: "POST",                                                  //use POST (we could also load this from the form if wanted to)
                    url: $(form).attr("action"),                       //get the URL from the form
                    data: $(form).serialize(),
                    datatype: "json",
                    success: function(data) {
                        if (success != undefined && success != null) success(data);
                        else if ($(form).attr("ajaxSuccssCallback") != undefined && $(form).attr("ajaxSuccssCallback") != null)
                            window[$(form).attr("ajaxSuccssCallback")](data);
                        else alert("Success");
                    },
                    error: function(XMLHttpRequest, textStatus, errorThrown) {
                        if (faile != undefined && fail != null) fail(data);
                        else if ($(form).attr("ajaxFailCallback") != undefined && $(form).attr("ajaxFailCallback") != null)
                            window[$(form).attr("ajaxFailCallback")](data);
                        else alert("Epic Fail");
                    }
                });
                return false;                            //don't forget to cancel the event so we don't submit the page!
            }
        });
    });
}

Answer 1

Лучшим подходом было бы использовать атрибуты data-* из HTML5 и хранить только имена функций, а не фактический исполняемый код JavaScript.Например,

<form id="MyForm" data-success-callback="woohoo" data-failure-callback="suck" />

Затем получите ссылки на эти функции через

var successFunc = window[$("#MyForm").attr("data-success-callback")];
var failureFunc = window[$("#MyForm").attr("data-failure-callback")];

Это работает, только если они являются глобальными функциями;в противном случае вам нужно будет сделать что-то более хитрое (например, разбить на . s и затем использовать индексную нотацию), чтобы получить ссылку на функцию.

Answer 2

спецификация HTML 5 содержит список всех допустимых атрибутов обработчика событий

Я считаю, что лучший способ обработки пользовательских событий (с помощью jQuery) - это связать их в сценарии и вызвать их вручную.

Ex.

$('#myForm').bind('prefix-success', mySuccessFunction)
  .bind('prefix-fail', myFailFunction);

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

if (success) $('#myForm').trigger('prefix-success');
else if (fail) $('#myForm').trigger('prefix-fail');

Конечно, это упрощение рассматриваемой проблемы. Вы захотите создать общий способ вызова / привязки событий.

Я предлагаю использовать префикс события, чтобы вы могли быть уверены, что ваши события не будут перезаписаны в более поздних спецификациях HTML.

Изменить, чтобы добавить:
Я забыл упомянуть , почему лучше хранить функции в скрипте:

HTML для семантической разметки (модель). CSS для стилей (вид). JavaScript для взаимодействия (контроллер). Сохраняйте особенности управления в контроллере, чтобы не загромождать вашу модель.