How do I call Javascript function in a class from HTML onclick event?

@toicontienJun 20.2014 — #He wants to combine object oriented JavaScript with event handling. Three basic ways come to mind.

[B]Outside code binds the event handlers[/B]

[code=html]<form ...>
 ...
 
  <button type="button" id="calculateButton">Click Me</button>
 </form>
 [/code]

<i>
 </i>function Calc() {
 }
 Calc.prototype = {
 constructor: Calc,
 
 <i>    </i>sum: function(event) {
 <i>    </i>    event.preventDefault();
 <i>    </i>    var form = event.target.form;
 <i>    </i>    // do some calculation
 <i>    </i>}
 };
 
 var calculator = new Calc();
 
 document.getElementById("calculateButton").addEventListener("click", function(event) {
 calculator.sum(event);
 }, false);

[B]The class binds event handlers[/B]

[code=html]
 <form id="calculator">
 ...
 
  <button type="button" class="calculateButton">Click Me</button>
 </form>
 
 <script type="text/javascript">
 function Calc(form) {
 this.form = typeof form === "string"
 ? document.getElementById(form)
 : form;
 
   this.sum = this.sum.bind(this);
   this.form.querySelector("button.calculateButton").addEventListener("click", this.sum, false);
  }
  Calc.prototype = {
   form: null,
 
   constructor: Calc,
 
   sum: function(event) {
   event.preventDefault();
 
   // use this.form to do some calculation...
   }
  };
 
  var calculator = new Calc("calculator");
 </script>
 [/code]

[B]Use an event delegation library[/B]

I created [url=https://github.com/gburghardt/oxydizr]Oxydizr[/url] as an easy way to bridge event delegation and object oriented code.

[code=html]
 <form id="calculator">
 ...
 
  <button type="button" data-action="calculator.sum">Click Me</button>
 </form>
 
 <script type="text/javascript" src="path/to/Oxydizr.js"></script>
 <script type="text/javascript" src="path/to/Oxydizr/FrontController.js"></script>
 <script type="text/javascript">
 
  // Your JavaScript "class"
  function Calc(form) {
   this.form = typeof form === "string"
   ? document.getElementById(form)
   : form;
 
   this.controllerId = this.form.id;
  }
  Calc.prototype = {
   form: null,
 
   constructor: Calc,
 
   onControllerRegistered: function(frontController, controllerId) {
   // listen to additional events, but the front controller gives you
   // click and submit event handlers for free.
   },
 
   onControllerUnregistered: function(frontController) {
 
   },
 
   // An "action handler" that handles a "click" event
   sum: function click(event, element, params) {
   event.preventDefault();
 
   // use this.form to do some calculation...
   // element is <button data-action="calculator.sum">...</button>
   // params is an empty object
   }
  };
 
  // Create the front controller
  var frontController = new Oxydizr.FrontController()
   .init(document.documentElement);
 
  // Create your calculator controller
  var calculator = new Calc("calculator");
 
  // Register your calculator controller with the front controller to wire up event handling
  frontController.registerController(calculator);
 </script>
 [/code]

How do I call Javascript function in a class from HTML onclick event?

2 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

How do I call Javascript function in a class from HTML onclick event?

2 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

2 Comments(s) _↴

Also in #JavaScript _↴