为什么使用模糊事件而不是提交表单数据提交

Question

我正在阅读klaviyo的集成指南。它用于提交表单数据的 JavaScript 是：

<script type="text/javascript">
    $("input[name='contact[email]']").on('blur', function(e) {
        e.preventDefault();
        var email = $(this).val();
        var settings = {
            "async": true,
            "crossDomain": true,
            "url": "https://manage.kmail-lists.com/subscriptions/external/subscribe",
            "method": "POST",
            "headers": {
                "content-type": "application/x-www-form-urlencoded",
                "cache-control": "no-cache"
            },
            "data": {
                "g": "LIST_ID",
                "$fields": "$source",
                "email": email,
                "$source": "Shopify form"
            }
        };
        $.ajax(settings).done(function (response) {
            console.log(response);
        });
    });
</script>

我想知道为什么它使用"blur"事件而不是用户单击"提交"按钮来触发 ajax 函数。我认为使用此代码，如果用户过早选择退出表单的文本框而不单击"注册"或"提交"，则将提交数据。

Answer 1

"我想知道为什么它使用"blur"事件而不是用户单击"提交"按钮来触发ajax函数。

因为这两种方式会给你两种不同的行为。很简单：

1. 当您使用click事件时，该功能将在按钮单击后执行
2. 当您使用blur事件时，该函数将在输入失去焦点后执行

Answer 2

当元素失去焦点并且可能"在"键入电子邮件之后"发送时，将触发模糊事件。一般来说，这对于从流失的转换很有帮助。