Есть ли способ создать элемент и привязать к нему событие?

Question

Есть ли способ, которым я мог бы использовать JavaScript для создания элемента, чтобы, когда пользователь пишет в нем (oninput), я мог отображать текст в консоли?Например, это было бы примерно так:

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

Моя функция немного сложнее, но вы поняли идею.Я хочу создать элемент <textarea> с помощью JavaScript, а затем установить для него событие input и передать ему объект this.

Answer 1

Это должно объяснить процедуру довольно четко:

// 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>

Answer 2

Вы можете сделать это:

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

Затем привязать прослушиватель событий к вновь созданному элементу:

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

Таким образом, прослушиватель событий всегда будет привязан к элементуВы создали.

Надеюсь, это вам как-то поможет.:)

Answer 3

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

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

Answer 4

если я вас правильно понял, вы можете сделать что-то вроде этого

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 )
})

Answer 5

Ну, во-первых, вы устанавливаете переменную для элемента, который хотите создать.В вашем случае, <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);