Question

我想在文档中附加一些文本，点击这些文本会启动一些带有不同字符串参数的函数。

我不知道为什么以下功能无法使onclick工作：

var strings = ["string1", "string2", "string3"];

function show (s) {
    alert(s);
}

for (var i = 0; i < strings.length; i++) {
    var elt = document.createElement('text');
    elt.innerHTML = strings[i];
    elt.onmouseover = "";
    elt.style = "cursor: pointer;";
    var s = "show(" + "'" + strings[i] + "'" + ")";
    elt.onclick = s;  
    document.body.appendChild(elt);
}

这是JSBin。

此外，我想逐行放置string1，string2和string3（即在其中插入<br>），并始终在{{1}内（我现在不认为它在<div class="padding">BEGIN ...</div>内）。有谁知道如何实现这个目标？

Answer 1

将"span"的{{1}}替换为"text"的参数;设置.createElement()元素的"<br>"时，在strings[i]之后添加.innerHTML;将elt设置为onclick，Function.prototype.bind()设置为上下文，elt设置为strings[i]功能的参数;创建引用show元素的变量，将创建的元素追加到链接到.padding元素的.padding元素调用.appendChild()，而不是.padding

＆＃13;

document.body

＆＃13;

var strings = ["string1", "string2", "string3"];

var padding = document.querySelector(".padding");

function show (s) {
    console.log(event.type);
    alert(s);
}

for (var i = 0; i < strings.length; i++) {
    var elt = document.createElement("span");
    elt.innerHTML = strings[i] + "<br>";
    elt.style.cursor = "pointer";
    elt.onclick = show.bind(elt, strings[i]);  
    padding.appendChild(elt);
}

＆＃13;

Answer 2

＆＃13;

var strings = ["string1", "string2", "string3"];

function show(s) {
  alert(s);
}

for (var i = 0; i < strings.length; i++) {
  document.body.innerHTML += '<div class="padding" style="cursor: pointer" onclick="show(\'' + strings[i] + '\')">' + strings[i] + '</div>';
}

＆＃13;

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
</head>

<body class="ms-font-m">
  <div class="padding">
    BEGIN
    <br>
  </div>
</body>

</html>

＆＃13;

Answer 3

有不同的方式来听取事件：

使用事件处理程序内容属性

它们的值是一个字符串，存储在HTML内容属性中。您可以在HTML源代码中设置它们，也可以通过JavaScript setAttribute：
设置它们
```
element.setAttribute('onclick', "show('" + strings[i] + "')");
```
我强烈反对使用它们。它们和eval一样邪恶，易受JS注入攻击，并且使用非常混乱的范围运行。
使用事件处理程序IDL属性

它们的值是函数引用。您可以将它们设置为JavaScript属性：
```
element.onclick = function() {
  show(strings[i]);
};
```
它们比事件处理程序内容属性更好，但它们仍然具有每个元素不能为同一事件提供多个事件处理程序的限制。
使用事件侦听器

它们的值是函数引用。您可以使用addEventListener：
在JavaScript中设置它们
```
element.addEventListener('click', function() {
  show(strings[i]);
});
```
您可以根据需要添加任意数量的事件侦听器。您甚至可以使用第三个参数来说明您是否希望事件监听器在捕获阶段而不是气泡阶段运行。

使用具有不同字符串参数的onclick函数附加文本

3 个答案: