javascript - 在原始 JavaScript 中加载 ajax 后将事件(使用动态数据)绑定(bind)到元素的最佳方法

Question

在 html 从 ajax 响应输入到容器后，我想将一个事件绑定(bind)到各种元素。我知道这可以通过在插入 html 后立即运行 addEventListener 或 on+event=function(){} 来实现。

我的问题是我不确定处理动态内容的最佳方法，而每次传递到事件中的数据都不同。

例如，将以下html加载到容器中:

<button id="myButton">go</button>

现在，我需要将 onclick 函数绑定(bind)到包含在远程端呈现的数据的按钮元素 - onclick 函数类似于:

myFunction($data1,$data2,$data3);

而 $data1,$data2,$data3 是带有动态数据的变量。我可以将此函数绑定(bind)到按钮的一种方法是在将 HTML 数据插入容器后输出要评估的脚本，因此 HTML 输出将如下所示:

<button id="myButton">go</button>
<script>document.getElementById('myButton').addEventListener('click',function(){myFunction(<?php echo $data1.','.$data2.','.$data3 ?>)});})</script>

无论如何，我是否可以以更灵活的方式从上述代码中获得结果，而不必为每个元素和每个请求输出该脚本行？

我想到的一个方法是有一个bind函数，在每次请求完成后调用，在这个函数中每个需要事件绑定(bind)的元素都存储在一个数组中。一个循环遍历数组并绑定(bind)适当的事件和函数——但这对于动态数据来说会变得复杂。有什么想法吗？

Answer 1

使用您自己的事件委托(delegate)形式:

var container = document.getElementById("container");
container.addEventListener("click", function (e) {
    e = e || window.event;
    var target = e.target || e.srcElement;
    if (target.tagName === "BUTTON") {
        // execute handler code for buttons
    }
}, false);

其中 container 元素是最近的、稳定的(未从 DOM 添加/删除)元素，这些动态元素/按钮在某种程度上被添加到。

该事件只绑定(bind)到一个包含元素，但会被从后代冒出的任何 click 事件触发(click 事件的默认行为)。

这将简单地检查元素的 tagName 是否为“button”。这是相当广泛的，但如果这是你想要过滤掉的东西，那就是你可以使用的。如果你想使用一个class，添加一个特定的class(可能是“special-class”)到动态按钮并使用:

if (~(" " + target.className + " ").indexOf(" special-class ")) {
    // execute handler for buttons with class "special-class"
}

如果您需要通过按钮/元素传递特定数据，请在生成按钮时将包含它的特定 data-* 属性添加到按钮:

<button id="whateverId" data-data1="$data1" data-data2="$data2" data-data3="$data3">go</button>

在您知道目标按钮的事件处理程序中，您可以使用:

var data1 = target.getAttribute("data-data1");
var data2 = target.getAttribute("data-data2");
var data3 = target.getAttribute("data-data3");

引用:

• > http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/all-you-need-to-know-about-the-html5-data-attribute/
• > http://caniuse.com/dataset