Come rendere onclicksenza jQuery, senza alcun codice aggiuntivo in HTML, come ad esempio:OnClick senza jQuery
<a href="#" onclick="tramtramtram">
Proprio utilizzando un file delle js extrnal?
<script type="text/javascript" src="functions.js"></script>
Ho bisogno di sostituire questo codice:
$("a.scroll-up, a.scroll-down").click(function(){
SNavigate($(this).attr("href").substr(7));return false;
});
Quando questo ancoraggio conterrà solo una funzione per gestire al clic, di quanto si può solo scrivere
document.getElementById('anchorID').onclick=function(){/* some code */}
in caso contrario, è necessario utilizzare il metodo DOM addEventListener
function clickHandler(){ /* some code */ }
var anchor = document.getElementById('anchorID');
if(anchor.addEventListener) // DOM method
anchor.addEventListener('click', clickHandler, false);
else if(anchor.attachEvent) // this is for IE, because it doesn't support addEventListener
anchor.attachEvent('onclick', function(){ return clickHandler.apply(anchor, [window.event]}); // this strange part for making the keyword 'this' indicate the clicked anchor
anche ricordarsi di chiamare il sopra codice quando tutti gli elementi sono caricati (ad esempio su window.onload)
- modifica
Vedo che hai aggiunto alcuni dettagli. Se si desidera sostituire il codice qui sotto
$("a.scroll-up, a.scroll-down").click(function(){SNavigate($(this).attr("href").substr(7));return false;});
con sth che non utilizza jQuery, questo dovrebbe fare il lavoro
function addEvent(obj, type, fn) {
if (obj.addEventListener)
obj.addEventListener(type, fn, false);
else if (obj.attachEvent)
obj.attachEvent('on' + type, function() { return fn.apply(obj, [window.event]);});
}
addEvent(window, 'load', function(){
for(var i=0, a=document.anchors, l=a.length; i<l;++i){
if(a[i].className == 'scroll-up' || a[i].className == 'scroll-down'){
addEvent(a[i], 'click', function(e){ SNavigate(this.href.substr(7)); e.returnValue=false; if(e.preventDefault)e.preventDefault();return false});
}
}
});
come su questo:
document.getElementById("lady").onclick = function() {alert('onclick');};
sembra buono. Puoi sostituire la funzione data con js ordinario, senza usare jquery? – Mike
Basta sovrascrivere la proprietà onlick. Se stavi usando addEventListener, dovresti anche tenere traccia di ciò che hai aggiunto per rimuoverlo in seguito (il che è senza dubbio quello che JQuery usa da solo). – Anonymous
@Mike: che è javascript "normale". Tranne che ottiene l'elemento dall'ID anziché dalla classe come il tuo codice. – bchhun
Basta utilizzare l'attributo onclick.
<a href="#" onclick="functionName(someParam)">
O per farlo da javascript,
document.getElementById("anchorID").onclick = function(){
some code
};
var el = document.getElementById ('lady'); el.addEventListener ("click", tramtramtram, false);
È necessario utilizzare getElementById per aggiungere il gestore onclick. Tuttavia è necessario avviare il codice da qualche parte. Senza di jQuery è possibile utilizzare solo il gestore body onload:
<body onload="myinitfunction()">
myinitfunction può essere in un file js esterno.
onload - rifiuti, non è vero? – Mike
Senza codice aggiuntivo in html, ecco un modo per farlo :
<html><body><head><script> // This script could be in an external JS file
function my_handler(elt) {
alert("Yay!");
return false;
}
function setup() {
document.getElementById('lady').onclick = my_handler;
}
window.onload = setup;
</script></head>
<body><a href='#' id='lady'>Test</a></body>
</html>
puoi sostituire una data funzione con js ordinario, senza usare jquery? – Mike
Questo * è * JavaScript ordinario, senza usare jQuery. – RichieHindle
c'è un nuovo codice nella domanda – Mike
W3C suggerisce:
element.addEventListener('click',doSomething,false)
Microsoft utilizza:
element.attachEvent('onclick',doSomething)
si può fare qualche funzione di rilevamento e determinare che chiedono di utilizzare.
puoi quindi rimuovere l'evento in un secondo momento? Che cosa succede se si trattava di un evento senza nome, come una dichiarazione di funzione cioè. foo.addEventListener ('onclick', function() {alert ('bar')); o è allegato per sempre? –
(Sono solo curioso, btw, non ho bisogno di questo codice ... stavo solo leggendo questo post e mi è venuta la domanda). –
Si rimuove l'evento tramite element.removeEventListener (WC3) o element.detachEvent (MS). Sfortunatamente, questo non funziona per le funzioni anonime. Rimango con le funzioni con nome per i gestori di eventi. –
eseguire questo script quando i carichi di documenti (in sostituzione di avviso con la vostra roba):
var rgLinks = document.getElementsByTagName("A");
for (var x=0; x<rgLinks.length; x++) {
el = rgLinks[x];
if (el.className == 'scroll-down' || el.className == 'scroll-down')
{
el.onclick = function() {alert('onclick');};
}
}
Forse questo è ciò che si sta chiedendo circa ...
goood, grazie. Quello è ciò di cui ho bisogno. – Mike
Si potrebbe anche trovare interessante la soluzione di Dean Edwards - http://dean.edwards.name/weblog/2005/10/add-event/ –
@Russ Cam: la soluzione di Dean Edwards ha uno svantaggio, quello che Dean ha descritto in seguito: http://dean.edwards.name/weblog/ – Rafael