如何將事件綁定到元素？

Question

如何將事件綁定到純JavaScript中的元素：

這就是JQuery的功能，您如何使用純JavaScript來完成它？

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

Answer 1

您將使用element.AddEventListener

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

在IE的情況下（在IE9之前），您將使用attachEvent 。

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

像這樣：

<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);
}​

觀看演示： http : //jsfiddle.net/E8nYr/2/

Answer 2

elem.addEventListener(eventType,    
                      handler,      
                      useCapture);  

對於IE6,7,8：

elem.attachEvent (event,            
                  handler);         

那是老式的方式，但是無論如何您都在使用jQuery，那么為什么要更改呢？

Answer 3

對於非IE，您可以給它三個參數：事件類型，要執行的函數和一個布爾值（true或false），指示是在捕獲階段還是在冒泡階段執行事件處理程序。 如果不確定要捕獲還是冒泡，請使用false。

element.addEventListener('click',doSomething,false)

//In IE
element.attachEvent('onclick',doSomething)