Question

How to bind event to element in pure javascript:

This is what JQuery does, how do you accomplish it with pure javascript?

$('#arrow_left')
 .bind('click', {'c_index': c_index - item_limit }, 
  function(e)
  {
   var r = e.data.c_index; 
  }

Answer 1

You would use element.AddEventListener

target.addEventListener(type, listener[, useCapture]);

And in IE’s case (prior to IE9) you would use attachEvent.

bSuccess = object.attachEvent(the_event, function_handler)
//the_event always starts with "on"

Like this:

<input id="btn" type="button" value="click me" />​​​​​​​​​​​

JS:

function click_handler()
{
    alert("clicked");
}
var el = document.getElementById("btn");   
if(el.addEventListener)//check if this exists
{
    el.addEventListener("click", click_handler);   
} else {
    //then we're on IE older than 9
    el.attachEvent("onclick",click_handler);
}​

See the demo:
http://jsfiddle.net/E8nYr/2/