Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

OnClick without jQuery

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; }); 
like image 698
Mike Avatar asked May 12 '09 20:05

Mike


People also ask

What is alternative for onclick?

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.

Can we use onclick in JavaScript?

The onclick event in JavaScript lets you as a programmer execute a function when an element is clicked.

Can any element have onclick?

The onclick attribute is part of the Event Attributes, and can be used on any HTML elements.

What is the difference between Onclick and click jQuery?

. 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).


1 Answers

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});       }    } }); 
like image 82
Rafael Avatar answered Sep 18 '22 07:09

Rafael