How to make onclick
without jQuery, with no extra code in HTML, such as:
<a href="#" onclick="tramtramtram">
Just using an external js file?
<script type="text/javascript" src="functions.js"></script>
I need to replace this code:
$("a.scroll-up, a.scroll-down").click(function(){ SNavigate($(this).attr("href").substr(7));return false; });
event: Event can be any valid JavaScript event. Events are used without the “on” prefix like use “click” instead of “onclick” or “mousedown” instead of “onmousedown”. listener(handler function): It can be a JavaScript function that responds to the event that occurs.
The onclick event in JavaScript lets you as a programmer execute a function when an element is clicked.
The onclick attribute is part of the Event Attributes, and can be used on any HTML elements.
. click events only work when element gets rendered and are only attached to elements loaded when the DOM is ready. . on events are dynamically attached to DOM elements, which is helpful when you want to attach an event to DOM elements that are rendered on ajax request or something else (after the DOM is ready).
When this anchor will contain only one function to handle on click, than you can just write
document.getElementById('anchorID').onclick=function(){/* some code */}
otherwise, you have to use DOM method 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
also remember to call the above code when all elements are loaded (eg. on window.onload)
-- edit
I see you added some details. If you want to replace the code below
$("a.scroll-up, a.scroll-down").click(function(){SNavigate($(this).attr("href").substr(7));return false;});
with sth that doesn't use jQuery, this should do the job
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}); } } });
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With