? ??????? JavaScript ??? ??? HTML ??? ???? ??? ???? ????? ??? ??? ?? ???? ???? ??? ?????. ?? `onclick` ???? `this` ???? ?? ??? ???? ? ??? ???. ??? ???? `this`? ??? ????? ???? ???? ??? ??? ??? ? ??? ????? ??? ??? ??? ??? `addEventListener`? ???? ?? ????.

??? ? ??????? ??? ? JavaScript ??? ??? HTML ??? ???? ???? ??? ??? ??? ??? ???? ?? ??? ????. ???? ?? ??? ???? ???? ??? ??(?: ?? ??)? ?? ??? ? ?? ??? ?? ???? ???? ???? ???? ??? ??? ? ??? ????. ??? HTML ??? onclick ??? ?? ???? this ???? ?? ??? ???? ????? ?? ??? this ???? ??? ???? ??? ????.

?? ??: ? ??? ??

Cart ???? ???? ??? ???? onclick ??? ????? ???? doSomething ??? ???? ???? ?? ?? ??? ?????.

 const myElm = document.getElementById("myElm");

??? ?? {
  ???(myElm) {
    myElm.innerHTML = `
      <button type="button" onclick="this.doSomething('hello world')">?? ?????</button>
    `;
  }

  doSomething(x) {
    console.log(x);
  }
}

const myCart = ? ??(myElm);

<div id="myElm"></div>

???? ? ??? ???? ??? this.doSomething? ??? ???? ??? ?????. ?? HTML? onclick ?? ????? ? ????? ????? ??? ??? Cart ??? ????? ??? ???? ???? DOM ?? ??(?: ?? ??)? ???? ?????. ??? ?? ???? doSomething??? ???? ????.

?? ??: addEventListener ? ??? ??

??? ???? ??? ???? ???? ???? this ???? ?? ??? ????? ????? ??? addEventListener ???? ???? ?? ??? ??? ???? ??? ???? ???? ???.

addEventListener? JavaScript? ???? ???? ??? ??? ????, ?? ?? DOM ??? ?? ??? ??? ???? ??? ? ????. Arrow ??? ??? ?? ?? this ???? ????. ?? this ????? ???? ??? ??? ? ?? ???? ??? ?????. ??? ????? ?? ??? ?? ??? this? ?? ??? ????? ????? ?? ?????.

??? addEventListener ? ??? ??? ??? ??? ?? ?????.

 const myElm = document.getElementById("myElm");

??? ?? {
  ???(myElm) {
    // 1. HTML ?? ??? ?????. let btn = document.createElement('button');
    btn.innerHTML = '?? ?????';

    // 2. addEventListener? ???? ?? ???? ??????. // ??? ???? ??? ?????. btn.addEventListener('click', () => {
      // ??? ???? 'this'? ?? ?? ?? ??? ????? ????? ????. // ?? 'this'? Cart ???? ????? ???? ?????. this.doSomething('hello world');
    });

    // 3. DOM? ??? ?????. myElm.append(btn);
  }

  doSomething(x) {
    console.log(x);
  }
}

const myCart = ? ??(myElm);

<div id="myElm"></div>

?? ??:

• document.createElement('button'): ? ?? ??? ???? ?????.
• btn.innerHTML = 'CLICK ME': ??? ?? ???? ?????.
• btn.addEventListener('click', () => { ... }): ??? ?? ?? ??? ???? ?????. ? ?? ????? ??? ?? ? ???? ?? ??? ?? ??? ?????.
• this.doSomething('hello world'): ??? ?? ??? this? Cart ???? ?? ????? ????? ?? doSomething ???? ???? ??? ? ????.
• myElm.append(btn): ?? ??? ?? ??? ??? DOM ????? ?????.

?? ?? ? ?? ??

1. ??? ??? ??? ??? ????. HTML ???? onclick="someFunction()"? ?? ??? ??? ???? ???? ???. ?? ?? HTML? JavaScript ??? ???? ?? ??? ??? ?? ??? ??? ???? ??? ???? ??? ????.
2. ? ??? ??: JavaScript?? ? ???? ??? ??? ?? ???? ?? ?????. ?? ??? ??? ??? ??? ??? ???? ????? ?? ?????(??? ?? ??).
3. ??? ??: ??? ???? ?????? ?? ???? ??? ??? ?? ?? ??? ?? ??? ??? ? ????. ??? ???? ?? ?? ??? ???? ?? ??? ??? ? event.target? ???? ???? ???? ?? ??? ?????? ??? ??? ??? ??? ??????.
4. ??? ??? ??: ???? ??? ??? ????? ???? ?? ??? ???? ? ?? ???? ?? ?? ??? ??? ????? RemoveEventListener? ???? ??? ???? ????? ???? ???.

??

JavaScript ????? HTML ??? ???? ???? ???? ????? ??? ???? ??? ? ??? ? ????? ???? ???? ????. document.createElement? ???? ??? ???? addEventListener? ??? ??? ???? ???? ??????? ??? ???? ??? ?? ??? ????? ????? ???? ???? ?? ??? ???? ????? ??? ?? ??? ??? ? ????. ? ?? ??? ?? UI ?? ??? ???? ?? ?? JavaScript ??? ?? ?????.

? ??? JavaScript ????? HTML ??? ???? ???? ???? ????? ??? ???? ?????.? ?? ?????. ??? ??? PHP ??? ????? ?? ?? ??? ?????!