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

ProgramBox

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

Post author:admin
Запись опубликована:11 апреля, 2023
Post category:Вопросы по программированию

#javascript #jquery #javascript-events

#javascript #jquery #dom-события

Вопрос:

Я изучаю чистый JavaScript. В настоящее время я изучаю объекты DOM, такие как ОКНО, ДОКУМЕНТ, ЭЛЕМЕНТ и так далее…

Я создаю текстовые поля «на лету» и хочу привязать функцию к событию каждого элемента (например, onfocus или onblur ) и передать self element в качестве аргумента (например, ‘this’).

Следующий скрипт создает текстовое поле и привязывает его к определенной функции.

 var txt= document.createElement("input");
txt.type="text";
txt.value='0';
txt.size=12;
txt.style.textAlign="right";

txt.id="txt_" self.count;

txt.addEventListener('focus', txt_focus(txt));
txt.addEventListener('blur', txt_blur(txt));

И ниже приведены функции:

 function txt_focus(txt){
txt.value=txt.id;
txt.style.backgroundColor='yellow';
}

function txt_blur(txt){
txt.style.backgroundColor='white';
}

Эта функция распознает данный аргумент как элемент и присваивает его идентификатору значение атрибута, но это не влияет на цвет фона.
Что я пропустил?

Вот весь HTML-код:

 <html>
<head>
<script type="text/javascript">
self.count =0;

function txt_focus(txt){
  txt.value=txt.id;
  txt.style.backgroundColor='yellow';
}

function txt_blur(txt){
  txt.style.backgroundColor='white';
}

function removeGroup(){
  if (self.count<1) {return;} 
  var parent=document.getElementById("myDiv");
  var fs_x =document.getElementById('fs_' self.count);
  parent.removeChild(fs_x);
  self.count--;
}

function addGroup(){
  if (self.count>11) {return;} 
  self.count  ;

  var parent=document.getElementById("myDiv");

  var fs=document.createElement("fieldSet");
  fs.style.borderRadius="7px"; 
  fs.style.height="45px";
  fs.id='fs_' self.count;

  var l=document.createElement("legend");
  l.innerHTML="interval_" self.count;
  l.style.color="darkgreen";
  l.style.fontStyle="italic";
  fs.appendChild(l);

  var d1= document.createElement("input");
  d1.type="date";
  d1.value='2014-05-01';
  d1.id='d1_' self.count;
  fs.appendChild(d1);

  var d2= document.createElement("input");
  d2.type="date";
  d2.value='2014-05-22';
  d2.id='d2_' self.count;
  fs.appendChild(d2);

  var txt= document.createElement("input");
  txt.type="text";
  txt.value='0';
  txt.size=12;
  txt.style.textAlign="right";

  txt.id="txt_" self.count;

  txt.addEventListener('focus', txt_focus(txt));
  txt.addEventListener('blur', txt_blur(txt));

  fs.appendChild(txt);
  parent.appendChild(fs);
  fs.scrollIntoView();

}

</script>
</head>
<body>
<input type="hidden" id="hd1" value="0"> </input>
<button onclick="addGroup();"> Add a group</button>
<button onclick="removeGroup();"> Remove a group</button>


<div id="myDiv" style="padding:7px;position:relative;margin-top:15px;width:500px;height:500px;background-color:#ccbbcc;overflow-y:auto;border:1px red solid;border-radius:15px;">

</div>
</body>
</html>

Желательно решение на чистом JavaScript, но также интересно решение на jQuery.

Мой второй вопрос:

У меня есть некоторый опыт работы с базовым JavaScript (например, математика, строки, функции, массивы, классы и так далее), И здесь я хочу получить ваш совет: есть ли необходимость углубляться в детали JavaScript вместо перехода к jQuery?

Ответ №1:

Проблема здесь в разнице между ссылкой на функцию и ее вызовом. Всякий раз, когда вы добавляете скобку, вы вызываете функцию и возвращаете результат, и результатом по умолчанию является undefined .

В обработчике событий вы хотите ссылаться только на функцию

 txt.addEventListener('focus', txt_focus);

Если вам нужно передать аргументы, вы бы использовали анонимную функцию

 txt.addEventListener('focus', function() {
    txt_focus(txt);
});

но здесь это не имеет смысла, поскольку вы передаете элемент, к которому вы могли бы получить доступ this внутри функции вместо этого

 txt.addEventListener('focus', txt_focus);

function txt_focus() {
    var txt = this; // the element
}

1. В моем простом я получаю идентификатор элемента txt.value=txt.id ; И я не понимаю, «var txt = this;» откуда он получает «это»? Я все равно попробую

2. Внутри каждой функции есть магическая переменная с именем this , которая ссылается на область вызова функции. В этом случае оно будет ссылаться на элемент и на самом деле не «берется» ниоткуда, оно просто есть. Начните с чтения некоторых руководств.

3. ADENEO >>> Потрясающий ответ, большое спасибо мудрому человеку. и что вы посоветуете мне по поводу моего второго вопроса? Я люблю Норвегию также из-за Сиссела и Магнуса.