2011-09-26 135 views
32

所以也許我只是沒有找對了地方,但我找不到怎麼做的jQuery的的jQuery的香草JavaScript版本。點擊

$('a').click(function(){ 
    // code here 
}); 

等同於普通的舊JavaScript的一個很好的解釋?

基本上我想運行一個函數,每次點擊一個a標籤,但我沒有能力加載jQuery到頁面上面的方式做到這一點,所以我需要知道如何使用普通JavaScript的。

回答

39

工作實例:http://jsfiddle.net/6ZNws/

的Html

<a href="something">CLick Here</a> 
<a href="something">CLick Here</a> 
<a href="something">CLick Here</a> 

的Javascript:

var anchors = document.getElementsByTagName('a'); 
for(var z = 0; z < anchors.length; z++) { 
    var elem = anchors[z]; 
    elem.onclick = function() { 
     alert("hello"); 
     return false; 
    }; 
} 
+1

+1我建議你用';'結束函數*表達式*。 – pimvdb

+0

哎呀好抓。 –

+0

我不同意。恕我直言,你可能會破壞以前的界限功能。我認爲使用「addEventListener」要好得多。 –

5

在這裏你去:

[].forEach.call(document.querySelectorAll('a'), function (a) { 
    a.addEventListener('click', function() { 
     // code here 
    }, false); 
}); 

現場演示:http://jsfiddle.net/8Lvzc/3/

(不IE8工作)

另外,我建議事件委派...

+2

你有沒有不使用'[] .forEach.call(...)'的理由? – pimvdb

+0

@pimvdb好吧,'call'不適合,因爲一個函數必須傳遞給'forEach'。我們必須使用'apply',所以:'[] .forEach.apply(...,[function(){}]);'。 '[函數(){}]'符號有點奇怪我的口味... –

+3

我的意思是http://jsfiddle.net/8Lvzc/1/。 – pimvdb

30
element.addEventListener('click', function() { ... }, false); 

你必須找到元素和d做一個循環來連接每一個。

6
document.getElementById('elementID').onclick = function(){ 
     //click me function! 
} 
+0

啊......應該指出,我不會知道'a'標籤或標識,所以只需要說「對於任何標籤點擊.....」 –

1

這將爲每個a元素分配一個onclick函數。

var links = document.getElementsByTagName("a"); 
var linkClick = function() { 
    //code here 
}; 

for(var i = 0; i < links.length; i++){ 
    links[i].onclick = linkClick; 
} 

你可以在行動here看到它。

11

請嘗試以下

var clickHandler = function() { 
    // Your click handler 
}; 

var anchors = document.getElementsByTagName("a"); 
for (var i = 0; i < anchors.length; i++) { 
    var current = anchors[i]; 
    current.addEventListener('click', clickHandler, false); 
} 

注意:由於Ӫ_._Ӫ指出,這不會對IE8的工作,並作爲下它不支持addEventListener

在IE8上,您可以使用以下訂閱onclick。這不是一個完美的替代品,因爲它需要大家要合作,但它也許能幫助你

var subscribeToOnClick = function(element) { 
    if (element.onclick === undefined) { 
    element.onclick = clickHandler; 
    } else { 
    var saved = element.onclick; 
    element.onclick = function() { 
     saved.apply(this, arguments); 
     clickHandler.apply(this, arguments); 
    } 
    } 
} 

for (var i = 0; i < anchors.length; i++) { 
    var current = anchors[i]; 
    subscribeToOnClick(current); 
} 
+2

不要在循環內創建函數。最好在循環外部創建函數,並引用循環內部的函數。 –

+0

@PeterOlson主要是我試圖複製原始問題的風格。我會更新它在這個意義上更正確 – JaredPar

+0

應該注意的是,IE8和更低版本不支持'addEventListener'。 – user113716