javascript - Django 模板 onclick 内联 html javascript 替代

Question

我读到使用 onclick 已被弃用并且是不好的做法。

我有这个 do_something 函数，它将处理 onclick 中的数据。我如何将其转换为 javascript:

{% for user in all_user %}
<tr>
    <td>{{ user.code }}</td>
    <td>
        <button type="button" onclick="do_something('{{ user.name }}', '{{ user.age }}', 1, '{{ user.desc }}');">small</h6></button>
    </td>
</tr>
{% endfor %}

Answer 1

1. 在按钮上设置一个类选择器，这样您就可以通过 Javascript 将事件监听器应用于它。
2. 您的函数需要每个用户唯一的参数，因此您需要将这些参数设置为每个按钮上的数据属性。

{% for user in all_user %}
  <tr>
      <td>
          <button class="user-action-btn" type="button"  
          data-name="{{ user.name }}" 
          data-age="{{ user.age }}" 
          data-desc="{{ user.desc }}">small</button>
      </td>
  </tr>
{% endfor %}

1. 在 Javascript 中，按类名获取元素并为每个元素设置事件处理程序。

这是一个 Javascript 代码示例

(function() {
        var classname = document.getElementsByClassName("user-action-btn");

        var myFunction = function(e) {
            e.preventDefault();
            var name = this.getAttribute("data-name");
            var age = this.getAttribute("data-age");
            var desc = this.getAttribute("data-desc");
            do_something(name, age, 1, desc)
        };

        for (var i = 0; i < classname.length; i++) {
            classname[i].addEventListener('click', myFunction, false);
        }
})();

这是 JQuery 的等价物

$( document ).ready(function() {
    $('.user-action-btn').on('click', function(e){
        e.preventDefault();
        var name = $(this).data('name');
        var age = $(this).data('age');
        var desc = $(this).data('desc');
        do_something(name, age, 1, desc);
});