puro equivalente JavaScript del jquery clic ()?
-
18-09-2019 - |
Domanda
Sto costruendo una piccola applicazione che cattura clic del mouse. Ho scritto il prototipo in jQuery, ma, dal momento che è una piccola applicazione concentrandosi sulla velocità, incorporando jQuery per utilizzare solo una funzione sarebbe un eccessivo.
Ho cercato di adattare questo esempio da JavascriptKit :
document.getElementById("alphanumeric").onkeypress=function(e){
//blah..blah..blah..
}
, ma non ha funzionato quando ho cercato
document.getElementsByTagName("x").onclick
Che cosa sto facendo di sbagliato?
Soluzione
Diciamo che avete un elenco di tag p che si desidera catturare lo scatto per il tag p:
var p = document.getElementsByTagName("p");
for(var i=0; i<p.length; i++){
p[i].onclick = function(){
alert("p is clicked and the id is " + this.id);
}
}
Guarda un esempio qui per maggiore chiarezza: http://jsbin.com/onaci/
Altri suggerimenti
Nel tuo esempio si utilizza getElementsByTagName, che restituisce un array di elementi DOM, si potrebbe iterare tale matrice e assegnare il gestore onclick per ogni elemento, ad esempio:
var clickHandler = function(){
alert('clicked!');
}
var elements = document.getElementsByTagName('div'); // All divs
for(var i = 0; i<elements.length; i++){
elements[i].onclick = clickHandler;
}
sembra un po 'come ti manca di più che la funzione di scatto di jQuery. Ti manca anche il motore di jQuery selettore, il concatenamento, e l'iterazione automatica attraverso collezioni di oggetti. Con un po 'più di sforzo si può minimamente di riprodurre alcune di queste cose.
var myClickCapture = function (selector) {
var method, name,iterator;
if(selector.substr(0,1) === "#") {
method = "getElementById";
name = selector.substr(1);
iterator = function(fn) { fn(document[method](name)); };
} else {
method = "getElementsByTagName";
name = selector;
iterator = function(fn) {
var i,c = document[method](name);
for(i=0;i<c.length;i++){
fn(c[i]);
};
};
myClickCapture.click = function (fn){
iterator(function(e){
e.onclick=fn;
})
}
return myClickCapture;
}
Non ho ancora testato il codice, ma in teoria, si ottiene qualcosa di simile:
myClickCapture("x").click(function(e){ alert("element clicked") });
Speriamo che questo ti dà un senso di cotte e di crude jquery sta facendo sotto le coperte.
document.getElementsByTagName("x")
restituisce un array di elementi aventi la tagname 'x'.
Si deve evento per ogni elemento dell'array restituito.