???? ??? ??, ??? ?? ?? ? ?? ??? ??? ???? ? ?????. JavaScript? ?? ??? ???? ? ??? ??? ???? ????. ??? ??? ?? ??? ?? ??? ??? ?????.

??? ?? ??????? : ? ?? ??? ??? ??. ??? ????? ??? ? ?? ???? ???? ????.

<div draggable="true">
    ?? ??
  </div>
  <div draggable="true">
    ??
  </div>
  <div draggable="true">
    G
  </div>
<p>??? ???????</p>

??? ? ??

JavaScript ???? ?? ??? ???? ? ? ??? ?? ??? ??? ??? ??? ??????. ??? ???? ?? ?? ???? ??? ???? ?????. ? ??? ?? ??? ??? ???? ? ??? ?? ??? ??? ? ????.

 document.querySelector ( '#red'). addEventListener ( 'dragstart', evt => {
  document.querySelector ( '#dragged'). textContent = 'draged red';
});

document.querySelector ( '#Yellow'). addEventListener ( 'DragStart', evt => {
  document.querySelector ( '#dragged'). textContent = 'Draged Yellow';
});

document.querySelector ( '#green'). addEventListener ( 'DragStart', evt => {
  document.querySelector ( '#dragged'). textContent = 'dragged green';
});

?? ??? ????

? ??? ??? ???? ?? ?????. ? ???? ?? ???? ?????. ? ?? ??? ??? ???? ?? ? ? ????.

 ?? ???? (?) {
  document.querySelector ( '#dragged'). textContent =`dragged $ {color}`;
}

??
  .QuerySelector ( '#red')
  .addeventListener ( 'dragstart', evt => preview ( 'red'));
??
  .QuerySelector ( '#Yellow')
  .addeventListener ( 'DragStart', evt => preview ( 'Yellow'));
??
  .QuerySelector ( '#green')
  .addeventListener ( 'dragstart', evt => preview ( 'green'));

??? ? ????? ??? ?? ??? ??? ???? ?????.

??? ??? ??????

??? ??? ???? ????? ?????. ??? ???? ???? ??? ??? ? ?? ?? ??? ????. ? ???? ???? ?????? ?? ??? ???? ?????? ?? ???? ???? ????. ??? ????? ?? evt.currentTarget ??? ??? ? ????. ??? currentTarget ??? ???? ???? ??? ?????. ? ???? ? ?? ??? ??? ? ?????.

 const preview = evt => {
  const color = evt.currenttarget.id;
  document.querySelector ( '#dragged'). textContent =`dragged $ {color}`;
};

document.querySelector ( '#red'). addEventListener ( 'DragStart', ????);
document.querySelector ( '#Yellow'). addEventListener ( 'DragStart', ????);
document.querySelector ( '#green'). addEventListener ( 'DragStart', ????);

?? ? ?? ?? ?? ??? ?? ? ????. ??? ???? ??? ??? ??? ? ? ??? evt.currentTarget.id ? ???? ??? ? ??? ?? ?? ?? ????.

??? ??? ??????

??? ??? ??? ? ?? ??? ????. ??? ???? ? ??? ???? ?? ?? ??? ???? ?? ?? ??? ???? ??? ??????.

????? ???? ???? ?? (??? ? ??)? ?????. ??? ??? ??? ??? ?? ????. ????? ??? ? ?? ??? ???? ?? ??? ???? ?????. ??? ??? ?? ??? ????? (HTML?? ??). ? ??? ???? ?? ??? ???? ???? ??? "??"??????. ??? ???? ?? ??? ???? ?? ???? ??? ? ?? ?????? ?? ??? ?????. ?? ??? ??? ( section ??)? ???? ?? ?? ??? (?? ? ??)? ????? ??? ???? evt.target ??? ??? ? ????.

 const preview = evt => {
  const color = evt.target.id;
  document.querySelector ( '#dragged'). textContent =`dragged $ {color}`;
};

documb

?? ??? ?? ??? ???? ??? ?????! ?? ??? ??? ?? ? ? ?????. ??? ??? ?? ?? ???? JavaScript ???? ???? ??? ??? ??? ??? ? ? ????.

?? ???? ??????

evt.target dragstart ? change ? ?? ???? ?? ?????, ? ?? ?? ? ?? ?? ?? ????? ? ????.

??? ??? ????? ?? ???? ?? ?? ?????? ??? ???? ????? ?? ? ? ????. ?? ???? ??? ?? ??? ?? ? DIV?? ?? ???? ??????.

??? ??? ?? ???? ?? ??? ??? ??????.

<div draggable="true">
    ?? ??
  </div>
  <div draggable="true">
    ??
  </div>
  <div draggable="true">
    G
  </div>
<p>????? ??????</p>

 const preview = evt => {
  const color = evt.target.id;
  document.querySelector ( '#clicked'). textContent =`?? $ {color}`;
};

documb

? ??? ??? ? ?? ????? ?? ? ?? ??? ??? "??"? ???? ????. ???? ?? ??? ? ??? ?? ??? ???? ?????.<span></span> ??? ? ??? ??<div> ??. SPAN?? ID ??? ???? <code>evt.target.id ??? ? ??????. ??? ??? ?? ????? ??? ????. ??? ??? ???? ???? ?? ???? ??? ??????. element.closest() ???? ?? ? ??? ?? ??? ?? ??? ?? ? ????.

 const preview = evt => {
  const element = evt.target.closest ( 'div [draggable]');
  if (element! = null) {
    const color = element.id;
    document.querySelector ( '#clicked'). textContent =`?? $ {color}`;
  }
};

?? ??? ?? ???? ?? ???? ??? ? ????! element.closest() NULL? ???? ???? ?? ???? ??? ???? ???? ???? ???? ?? ?????.

? ?? ?

??? ?? ??? ???? ???? ??? ???? ?? ????.

??

???? ??? JavaScript? ???? ??? ????? ???? ???? ??? ???? ??? ?? ????. ??? ???? ? ????? ???? ??? ? ??? ?? ? ??? ??? ???? ???????.

<div id="buttons-container"></div>
<button id="add">? ??? ??????</button>

 ButtonCounter = 0???;
document.querySelector ( '#add'). addEventListener ( 'click', evt => {
  const newbutton = document.createElement ( 'button');
  newbutton.textContent = ButtonCounter;

  // "? ?? ??"? ?? ? ??? ? ??? ??? ?? NewButton.addeventListener ( 'Click', evt => {

    // ???? ???? ?? ??? ??????.
    document.querySelector ( ' #clicked'). textContent =`?? ?? #$ {newButton.textContent}`;
  });

  ?? ???;

  const ???? = document.querySelector ( '##buttons-container');
  ????. AppendChild (Newbutton);
});

??? ???? ?????? ?? ??? ???? ??? ? ????. ?? ?????? ?? ??? ???? ??? ?? N?? 2? ?? ???.

 ButtonCounter = 0???;
const ???? = document.querySelector ( '##buttons-container');
document.querySelector ( '#add'). addEventListener ( 'click', evt => {
  const newbutton = document.createElement ( 'button');
  newbutton.dataset.number = buttoncounter;
  ?? ???;

  ????. AppendChild (Newbutton);
});
container.addeventListener ( 'click', evt => {
  const clickedbutton = evt.target.closest ( 'button');
  if (clickedbutton! = null) {
    // ???? ???? ?? ??? ??????.
    document.querySelector ( ' #clicked'). textContent =`?? ?? #$ {clickedbutton.dataset.number}`;
  }
});

??

??? ?? ????? ????? ? ??? ?? ??? ??? ?? ??? ????????.

????? = {
  ??: '',
  ??? : '',
  ????: ''
};

??
  .QuerySelector ( 'input [name = "name"]')
  .addeventListener ( 'Change', evt => {
    const inputElement = document.querySelector ( 'input [name = "name"]');
    response.name = inputElement.value;
    document.querySelector ( '#preview'). TextContent = json.stringify (??);
  });
??
  .QuerySelector ( '?? [?? = "???"]')
  .addeventListener ( 'Change', evt => {
    const inputElement = document.querySelector ( 'input [name = "email"]');
    response.email = inputeLement.Value;
    document.querySelector ( '#preview'). TextContent = json.stringify (??);
  });
??
  .QuerySelector ( '?? [?? = "??"]')
  .addeventListener ( 'Change', evt => {
    const inputElement = document.querySelector ( 'input [name = "password"]');
    response.Password = inputElement.Value;
    document.querySelector ( '#preview'). TextContent = json.stringify (??);
  });

?? ??? ?????<form></form> ??? ?? ???.

 ????? = {
  ??: '',
  ??? : '',
  ????: ''
};

document.querySelector ( 'form'). addEventListener ( 'change', evt => {
  ?? [evt.target.name] = evt.target.value;
  document.querySelector ( '#preview'). TextContent = json.stringify (??);
});

?????

?? ??? ??? ??? ??? ??? ?? ??? ????? ?? ??? ?? ? ??? ??? ???? ??? ?? ????. ? ??? ??? ???? ??? ???? ?? ???? ? ?????? ????. ?? ?? ?? ???? ?? ???? ?? ?? ??? ?? ? ?? ??? ?? ? ??? ??? ??????.