Jak onclickbez jQuery, bez dodatkowego kodu w HTML, takich jak:OnClick bez jQuery
<a href="#" onclick="tramtramtram">
Wystarczy za pomocą pliku an extrnal js?
<script type="text/javascript" src="functions.js"></script>
muszę wymienić ten kod:
$("a.scroll-up, a.scroll-down").click(function(){
SNavigate($(this).attr("href").substr(7));return false;
});
Gdy ta kotwica będzie zawierać tylko jedną funkcję do obsługi na kliknięcie, niż można po prostu napisać
document.getElementById('anchorID').onclick=function(){/* some code */}
inaczej, trzeba użyć metody DOM metodę 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
również pamiętać, aby wywołać powyżej kodu po załadowaniu wszystkich elementów (np. na window.onload)
- edycja
Widzę, że dodałeś kilka szczegółów. Jeśli chcesz zastąpić poniższy kod
$("a.scroll-up, a.scroll-down").click(function(){SNavigate($(this).attr("href").substr(7));return false;});
z czegoś, że nie używa jQuery, to powinien wykonać zadanie
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});
}
}
});
jak ten temat:
document.getElementById("lady").onclick = function() {alert('onclick');};
wygląda dobrze. Czy możesz zastąpić daną funkcję zwykłym js, bez użycia jquery? – Mike
Wystarczy nadpisać właściwość onlick. Jeśli korzystasz z addEventListener, będziesz musiał również śledzić to, co dodałeś, aby je później usunąć (co bez wątpienia samo JQuery używa). – Anonymous
@Mike: czyli "zwykły" javascript. Poza tym, że pobiera element przez id, a nie przez klasę, jak twój kod. – bchhun
Wystarczy użyć atrybutu onclick.
<a href="#" onclick="functionName(someParam)">
Albo to zrobić z javascript,
document.getElementById("anchorID").onclick = function(){
some code
};
var el = document.getElementById ('pani'); el.addEventListener ("click", tramtramtram, false);
Musisz użyć getElementById, aby dodać procedurę obsługi onclick. Jednak musisz gdzieś zainicjować swój kod. Bez jQuery można używać tylko programu obsługi onload ciała:
<body onload="myinitfunction()">
myinitfunction może być w zewnętrznym pliku JS.
onload - odpady, prawda? – Mike
Bez dodatkowego kodu w HTML, oto sposób to zrobić :
<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>
można zastąpić daną funkcję zwykłym js, bez użycia jquery? – Mike
To * jest * zwykłym JavaScriptem, bez użycia jQuery. – RichieHindle
jest nowy kod w pytaniu – Mike
W3C proponuje:
element.addEventListener('click',doSomething,false)
Firma Microsoft używa:
element.attachEvent('onclick',doSomething)
Można wykonać wykrywanie niektórych funkcji i określić, z którego połączenia korzystać.
możesz usunąć zdarzenie później? Co jeśli to było bezimienne wydarzenie, jak deklaracja funkcji, czyli. foo.addEventListener ('onclick', function() {alert ('bar')); czy jest ono dołączone na zawsze? –
(Jestem po prostu ciekawy, btw, nie potrzebuję tego kodu ... właśnie czytałem ten post i pytanie przyszło mi do głowy). –
Usunięcie zdarzenia przez element.removeEventListener (WC3) lub element.detachEvent (MS). Niestety nie działa to w przypadku anonimowych funkcji. Pozostałbym z nazwanymi funkcjami dla programów obsługi zdarzeń. –
Wykonanie tego skryptu, gdy ładunki dokumentów (zastępujący alert z rzeczy):
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');};
}
}
Może to o co prosicie o ...
goood, dzięki. To jest to, czego potrzebuję. – Mike
Możesz również znaleźć rozwiązanie Dean Edwards ciekawe - http://dean.edwards.name/weblog/2005/10/add-event/ –
@Russ Cam: rozwiązanie Dean Edwards ma jedną wadę, co Dean opisane później: http://dean.edwards.name/weblog/ – Rafael