More Buttons

• We can make buttons work other ways as well.
• All were created with similar calls

  <li> <input type="button" value = "Button1" id="Button1"/>
  <li> <input type="button" value = "Button2" id="Button2"/>
  ...
  
  <script>
  function fun1() {
      console.log("I was called")
  }
  
  const button1 = document.getElementById("Button1")
  const button2 = document.getElementById("Button2")
  const button2a = document.getElementById("Button2a")
  const button3 = document.getElementById("Button3")
  const button3a = document.getElementById("Button3a")
  
  button1.onclick = fun1;
  
  button2.onclick = function () {console.log("I was called too") }
  button2a.addEventListener("click", function(){ console.log("I too was called")})
  
  button3.onclick = () => {console.log("Called with an arrow function")}
  button3a.addEventListener("click", () => {console.log("arrow function!!!!")})
  </script>
      

  • John suggested button2.
  • I added button1 to show it could be done.
  • And Button 2a was just a test.
  • Button 3 uses a "arrow" function
  • As does button 3a
• These show that functions are just objects in Javascript.
• I really dislike most of these techniques.
  • Anonymous functions are functions that are not tied to an identifier.
    • They are from theory in the 1930s, Alonzo Church.
    • They are lambda functions in c++
    • But reuse is not possible.
  • Setting the onclick property is ok.
    • It is discussed here
  • Declaring the event in the button (html code) is discouraged
    • <input type="button" onclick="Function()">
    • reference.
    • They are the original method.
    • Style wise this is bad, (according to the documentation, not just me) because you are mixing html and javascript.
    • They are harder to work with.
    • Sometimes they are disabled for security reasons.
  • addEventListener() is the preferred method.
    • see this reference
• Why are parameters to callbacks a problem?
  • The designers of the event system do not know what types or number of parameters you might want to pass to your callback functions.
  • Therefore, they would have to build a generic interface mechanism
  • This is not easy.
• Some systems let you have an additional void * data parameter.
  • This works, but you need to do a bunch of casting to get the data in the right type.
  • But javascript does not support this (AFIK)
• Event functions are passed a single parameter
  • This is an element of the event hierarchy.
  • You can find information about the event that occurred.
  • We will look at this in the future.