title: "onclick" and "this" in javascript
body: <p>I am confused:<br></p>
  
  <ul>
  <li><p>why with inline onlick, we have to write onclick="hello()", but in JS, we should write btn.onclick=hello or btn.addEventListener('click',hello);</p></li>
  <li><p>for regular function, why with inline onlick, "this" refers to window, but with js call, "this" refers to button. </p></li>
  <li><p>I don't understand last two buttons</p></li>
  </ul>
  
  <p>according to w3school, In a function, this refers to the global object.
  <a href="https://www.w3schools.com/js/js_this.asp" rel="nofollow noreferrer">https://www.w3schools.com/js/js_this.asp</a></p>
  
  <p>In regular functions the this keyword represented the object that called the function, which could be the window, the document, a button or whatever. 
  <a href="https://www.w3schools.com/js/js_arrow_function.asp" rel="nofollow noreferrer">https://www.w3schools.com/js/js_arrow_function.asp</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const arrayBtn = document.querySelector(".arrowFunc");
  const regBtn = document.querySelector(".regFunc");
  hello = () =&gt; console.log("i am arrow function" + this);
  function hiii(){
    console.log("i am regular function" + this);
  }
  arrayBtn.addEventListener("click", hello);
  regBtn.addEventListener("click", hiii);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;button onclick="hello()"&gt;This calls an arrow function with an inline onclick&lt;/button&gt;
  &lt;button class="arrowFunc"&gt;This calls an arrow function with event listener&lt;/button&gt;
  &lt;button onclick="hiii()"&gt;This calls an regular function with an inline onclick&lt;/button&gt;
  &lt;button class="regFunc"&gt;This calls an regular function with event listener&lt;/button&gt;
  &lt;button onclick="function tes(){console.log(this)}tes()"&gt;button&lt;/button&gt;
  &lt;button onclick="console.log(this)"&gt;button&lt;/button&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <pre><code>[Log] i am arrow function[object Window] &lt;br&gt;
  [Log] i am arrow function[object Window] &lt;br&gt;
  [Log] i am regular function[object Window] &lt;br&gt;
  [Log] i am regular function[object HTMLButtonElement] &lt;br&gt;
  [Log] Window {document: #document, window: Window, NaN: NaN, nalert: function, obj: {name: "my_obj"}, …} &lt;br&gt;
  [Log] &lt;button onclick="console.log(this)"&gt;button&lt;/button&gt;
  </code></pre>