有没有一种创建元素并将事件绑定到它的方法?

时间:2019-09-20 01:44:13

标签: javascript html dom dom-events

有没有一种方法可以使用JavaScript创建元素,即当用户在其中写入(输入)时可以在控制台中显示文本吗?例如,将是这样的:

<textarea oninput="print(this);"></textarea>
<script>
function print(e) {
  console.log(e.value);
}
</script>

我的功能稍微复杂一点,但是您知道了。我想要的是使用JavaScript创建<textarea>元素,然后在其上设置input事件,并将其传递给this对象。

5 个答案:

答案 0 :(得分:2)

这应该很清楚地解释该过程:

// Selects an existing element in the DOM
const theParentElement = document.getElementById("container");

// Makes our new element
const newTextArea = document.createElement("textarea");

// Adds the new element to the DOM
theParentElement.appendChild(newTextArea);

// Calls printText when the textarea receives key input (or actually, ANY input)
newTextArea.addEventListener("input", printText);

// The listener gets a reference to the triggering event. Let's call it `event`
function printText(event){
  
  // The event's `target` property holds the element where the event happened
  const localReferenceToTheTextArea = event.target;

  // The text of a textarea  element lives in its `value` property
  const text = localReferenceToTheTextArea.value;

  console.log(text);
}
<div id="container"></div>

答案 1 :(得分:1)

您可以这样做:

var textarea = document.createElement("textarea");

然后将事件侦听器绑定到新创建的元素:

textarea.addEventListener("input", function () { /*Do the thing*/ });

这样,事件侦听器将始终绑定到您创建的元素。

我希望这会对您有所帮助。 :)

答案 2 :(得分:0)

如果我对您的理解正确,则可以执行以下操作

var myTextarea = document.createElement("textarea")
myTextarea.setAttribute("oninput", "print(this);")
// we get something like this => <textarea oninput="print(this);"></textarea>

document.body.appendChild( myTextarea )
console.log(myTextarea)

或者您可以使用javascript EventListener

var myTextarea = document.createElement("textarea")
/* add the textarea to the body */
document.body.appendChild( myTextarea )
/* when we can use EventListener */
myTextarea.addEventListener("input", ()=>{
    /* do something with value*/
    console.log( myTextarea.vlaue )
})

答案 3 :(得分:0)

<textarea id="area"></textarea>

<script>
  const textArea = document.getElementById("area"); // Defines `textArea`
  textArea.addEventListener("input", e => {
    console.log(e.target.value);
  });
</script>

答案 4 :(得分:-1)

首先,将一个变量设置为要创建的元素。就您而言,<textarea>

var textareaElement = document.createElement("textarea");

然后,像这样设置oninput

textareaElement.setAttribute("oninput", "print(this)");

最后,将元素添加到body

document.body.appendChild(textareaElement);

放在一起:

function print(e) {
  console.log(e.value);
}

var textareaElement = document.createElement("textarea");
textareaElement.setAttribute("oninput", "print(this)");
document.body.appendChild(textareaElement);