如何將事件綁定到元素？

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)