JavaScript Module Pattern: Lets Handle DOM Events

This is second part of my publication about work with JavaScript modules, and in this part I will show how to handle events in JavaScript modules - this is last step before we will start developing of our first JavaScript Modular App.

In previous post we create basic module and learn how it work. Now I want to extend "power" or our Basket module (you can see it on previous post).

Events Handling in JavaScript Module

Before start event handling in modules, I want to show you how to catch DOM events in non-modular JS code.

Catch Events in jQuery

For DOM manipulation I will use jQuery - it's smart and easy for understanding. Here is how we catch events in jQuery:

$('#main').click(function(e){
  // do something here
})

But, if you may deal with dynamic loaded content from AJAX requests, you can't handle events by standard $(element).click(). I this case I use jQuery event.target

$('body').click(function(e){
  e = $(event.target)
  alert(e.attr('class'))
})

Now Lets Do it in Modules

So now, if I click on each element inside body of my page, code above will display it class (if element has class). I will use this variant to implement event handling into my module. Here you can see how I do this:

var Basket = (function(){

  var obj = {
    handler:{
      add:"#new-item",
      remove:'.removeItem'
    }
  }

  $('body').click(function(e){
    e = $(e.target)
    $.each(set.handler, function(k,v){
      if(e.is(v)) set[k](e)
    })
  })

  return obj
})()

Here obj.handler its a JSON-map of my module Basket click events, where key is a name of module method and value its a simple css selector. I catch $(body).click event and check it for each obj.handle element. If it exists if(e.is(v)) - it will be called set[k](e). Us you can see, I send e argument to called method - that is this link to DOM element, for which we was handle click event.

Our Module Gonna to Live

Yeap, its hard to understand, but very easy to use) Now I want to create some HTML to handle two DOM events.

<div>
  <ul>
    <li>
      <span class="add-item" data-type="banana">Banana</div>
    </li>
    <li>
      <span class="add-item" data-type="potato">Potato</div>
    </li>
  </ul>
</div>

Lets add Basket.add method to our module - its gonna to be easy)

var Basket = (function(){

  var obj = {
    list:{},
    handler:{
      add:".add-item"
    }
  }

  set.add = function(e){
    // get item name
    var name = e.attr('data-type')
    // if item not exists in Basket.list - add it
    if(typeof list[name] == 'undefined')
      list[name] = {}
    // else if it was added - remove it from list
    else
      delete list[name]
  }

  $('body').click(function(e){
    e = $(e.target)
    $.each(set.handler, function(k,v){
      if(e.is(v)) set[k](e)
    })
  })

  return obj
})()

Yea! Our Basket.add() method can add and remove items in our "basket". I do this, to show you how its easy - handle multiple events in one module.

Here is many other trick, which wait for us, but here I want to stop my story about event handling in modules and go to make next post, where we will be create our first JavaScript modular App.

Thanks for visits, you are awesome! Lets do JavaScript :)

Source: