Javascript 如果我在表单上添加了提交事件侦听器，那么event.target将包含什么

我在页面上有很多表单，当其中一个表单被提交时，我希望通过ajax向视图发送请求，并拥有文章的id和其他信息。所以我需要检查被点击的表单是否与event.target相同。我做了类似的操作，但不知道是否正确（第一个console.log可以工作，但第二个不行）：

{新闻中的文章%}
{{article.published}}



{以article.UpVoces.count作为总投票数，以article.DownVoces.count作为总投票数%}
{{总票数}总票数{总票数}多元化}
{{total_downloads}}}downloate{{{total_downloads}多元化}
{%endwith%}
{{form.as_p}}
{%csrf_令牌%}
{%endfor%}
{%endblock%}
{%block-domready%}
常数
list=document.getElementById（'list'），
items=document.getElementsByClassName（'vote'）；
forms=document.getElementsByClassName（'form'）；
list.addEventListener（'click'，voteFunc）；
列表。addEventListener（'submit'，commentFunc）；
函数commentFunc（事件）{
event.preventDefault（）；
const clickedForm=event.target；
console.log（“事件触发”）；
for（以表格形式填写表格）{
如果（表单==点击表单）{
console.log（'形式是event.target'）
$.ajax({
url:“{%url”新闻：新闻列表“%}”，
键入：“POST”，
数据：{'id'：$（event.target）.attr（'form-id'），'title'：$（this）.elemets['title\u field'].text（），'body'：$（this）.elemets['body\u field'].text（），
数据类型：“json”
})
}
}
}

---

希望听到关于如何更好地实现它以及event.target包含哪些内容的建议

您可以为表单提交事件编写事件处理程序单击此事件将被调用，然后使用方法获取表单中的所有输入，并使用

&name=value

附加表单id，然后您可以将其传递到后端

演示代码：

//表单何时获得提交
$（“form.form”）.submit（函数（e）{
//serialize将以名称=值的形式获取所有输入，并使用`&`
console.log（“要发送的数据-->”+$（this.serialize（）+”&id=“+$（this.attr（'form-id'））
$.ajax({
类型：“POST”，
url:“{%url”新闻：新闻列表“%}”，
数据：$（this）.serialize（）+“&id=“+$（this）.attr（'form-id'），//发送相同的数据
数据类型：“json”
});
e、 预防默认值（）；
});

abcd



23 54
2 56
有些事：

abcd



23 54
2 56
有些事：


<div id = "list">
            {% for article in news %}
                <a href="{{ article.resource }}"><h1>{{ article.title }}</h1></a>
                <p>{{ article.published }}</p>
                <img src = "{{ article.url }}">
                <p>
                    <button><a href="#" class="vote" id="{{ article.id }}" action = "upvote">Upvote</a></button>
                    <button><a href="#" class="vote" id="{{ article.id }}" action = "downvote">Downvote</a></button>
                </p>
                <div id="span">
                    {% with article.upvotes.count as total_upvotes and article.downvotes.count as total_downvotes %}
                        <span upvote-id = "{{ article.id }}">{{ total_upvotes }}</span><span> upvote{{ total_votes|pluralize}}</span>
                        <span downvote-id = "{{ article.id }}">{{ total_downvotes }}</span><span> downvote{{ total_votes|pluralize}}</span>
                    {% endwith %}
                </div>
                <form method = 'post' action = '{% url "news:news_list" %}' form-id = '{{ article.id }}' class="form">
                    {{ form.as_p }}
                    {% csrf_token %}
                    <input type = "submit" value = "post">
                </form> 
            {% endfor %}
        </div>
{% endblock %}
{% block domready %}
        const 
            list = document.getElementById('list'),
            items = document.getElementsByClassName('vote');
            forms = document.getElementsByClassName('form');

        list.addEventListener('click', voteFunc);
        list.addEventListener('submit', commentFunc);

        function commentFunc(event){
            event.preventDefault();
            const clickedForm = event.target;
            console.log('event triggered');
            for (let form in forms){
                if (form == clickedForm){
                    console.log('form is event.target')
                    $.ajax({
                        url: '{% url "news:news_list" %}',
                        type: 'POST',
                        data: {'id':$(event.target).attr('form-id'), 'title':$(this).elemets['title_field'].text(), 'body':$(this).elemets['body_field'].text()}, 
                        dataType: 'json'
                    })
                }
            }
        }